Перейдіть до діва за допомогою jquery

205

тому у мене є сторінка, яка має фіксовану смужку посилання збоку. Я хотів би прокрутити різні диви. В основному сторінка - це лише один довгий веб-сайт, на якому я хотів би прокрутити різні диви, використовуючи поле меню убік.

Ось у мене до цього часу jquery

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

Проблема полягає в тому, що він автоматично переходить до контакту, коли він завантажується, і тоді, коли я натискаю кнопку #contactlink в меню, він прокручується назад доверху.

Редагувати: HTML

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

Дякую за допомогу

jquery scroll

— тшаук
джерело

Як виглядає html, де має бути контактне посилання?

— Джеймс Блек

Це може бути дублікат stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery

— Джеймс Блек

3

Чи є причина, що ви використовуєте jQuery замість звичайних старих якорів?

— brianpeiris

2

@James - це насправді не дублікат. Це запитання прокручує сторінку до конкретних знаків. Це запитання прокручує сторінку за певними кроками (незалежно від того, які дзвінки відображаються).

— Пітер Айтай

Це дійсно добре: css-tricks.com/snippets/jquery/smooth-scrolling . Працювали для мене.

— maahd

342

По-перше, ваш код не містить contactdiv, у ньому є contactsdiv!

На бічній панелі ви знаходяться contactв діві внизу сторінки, яку ви маєте contacts. Я вилучив остаточний sзразок коду. (ви також неправильно написали projectslinkідентифікатор на бічній панелі).

По-друге, подивіться деякі приклади для натискання на довідкову сторінку jQuery. Ви повинні використовувати object.click( function() { // Your code here } );функцію click like, щоб прив’язати обробник подій клацання до об'єкта .... Як у моєму прикладі нижче. В сторону можна також просто викликати клацання по об'єкту, використовуючи його без аргументів, наприклад object.click().

По-третє, scrollToце плагін jQuery. Я не знаю, чи встановлений у вас плагін. Ви не можете використовувати scrollTo()без плагіна. У цьому випадку функціонал, який ви хочете, - це лише 2 рядки коду, тому я не бачу причин використовувати плагін.

Гаразд, зараз до рішення.

Код нижче буде прокручуватися до правильного div, якщо ви натиснете посилання на бічній панелі. Вікно має бути досить великим, щоб дозволити прокручування:

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

Живий приклад

~~(Прокрутіть до функції, взятої звідси )~~

PS: Очевидно, що у вас повинен бути вагомий привід їхати цим маршрутом замість використання тегів якоря <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Пітер Айтай
джерело

Рада знати, що це допомогло, але я думаю, що ви маєте на увазі "соління", хоча я вважаю, що краще їх з'їсти, ніж виходити з них.

— Пітер Айтай

Він не прокручується при першому клацанні. : / Натискаю на нього вдруге, і воно працює.

— Бурак Каракуш

Я думаю, що більш логічно поставити ідентифікатор href так: href = "# about" jsfiddle.net/onigetoc/w5muyern

— Джино

це не працює спочатку. але коли ми натискаємо другий раз, тоді його робота ідеально.

— Satish Singh

115

У .scrollTo()jQuery немає методу, але є такий .scrollTop(). .scrollTopочікує параметр, тобто значення пікселя, до якого повинна прокручуватися смуга прокрутки.

Приклад:

$(window).scrollTop(200);

буде прокручувати вікно (якщо в ньому достатньо вмісту).

Таким чином, ви можете отримати це бажане значення за допомогою .offset()або .position().

Приклад:

$(window).scrollTop($('#contact').offset().top);

Це повинно прокрутити #contactелемент у подання.

Альтернативним методом не є jQuery .scrollIntoView(). Ви можете викликати цей метод будь-яким DOM elementподібним чином:

$('#contact')[0].scrollIntoView(true);

trueвказує на те, що елемент розташований вгорі, тоді як falseрозміщуватиме його внизу подання. Хороша річ за допомогою методу JQuery, ви можете навіть використовувати його fx functionsяк .animate(). Таким чином, ви можете плавно прокрутити щось.

Довідка: .scrollTop () , .position () , .offset ()

— jAndy
джерело

Боюся, у мене все ще є подібні проблеми. Навантаження на сторінку прокручується вниз на певну кількість сторінки, а не на контактну поділку, і посилання також не переносить мене до контакту. Дякую тхо. EDIT: скажіть, що я розміщую діви за допомогою версії css, чи це призведе до того, що він перейде в неправильне місце? Просто думка.

— тшаук

22

Ви можете спробувати :

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});

— IT Vlogs
джерело

13

Додайте цю маленьку функцію і використовуйте її так: $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

— Райан
джерело

6

Добре, хлопці, це невелике рішення, але воно працює чудово.

припустимо наступний код:

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

ви хочете, коли нова публікація буде додана до 'the_div_holder', тоді вона прокручує її внутрішній вміст (.post's div) до останнього, як чат. Отже, виконайте наступне, коли новий .post додатиметься до основного власника Div:

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));

— християнський
джерело

3

Спочатку знайдіть позицію елемента div до цього, який потрібно прокрутити методом jQuery position ().
Приклад: var pos = $ ("div"). Position ();
Потім отримайте y кординати (висоту) цього елемента методом " .top ".
Приклад: pos.top;
Потім отримайте x кординати цього елемента діва методом " .left ".
Ці методи походять від позиціонування CSS.
Як тільки ми отримуємо x & y кординати, ми можемо використовувати jaroll 's scrollTo (); метод.
Цей метод прокручує документ до конкретної висоти та ширини.
Він приймає два параметри як x & y кординати. Синтаксис: window.scrollTo (x, y);
Потім просто передайте x & y кординати елемента DIV у функції scrollTo () .
Перегляньте приклад нижче ↓ ↓

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>

— Сайман Салман
джерело

І сіно додати трохи тексту пояснення того, що ти зробив, просто не має великого сенсу .. !!

— Клін Дільва

Як сказав @ClainDsilva, будь ласка, додайте текстове пояснення.

— SreekanthGS

-1

Не потрібно теж цих. Просто додайте div id до href тегу <a>

<li><a id = "aboutlink" href="#about">auck</a></li>

Ось так.

— Армін Ахлаг
джерело

Будь ласка, киньте на це більше світла. Це не працювало для мене.

— Ifesinachi Bryan