Выделите div, используя jquery

205

поэтому у меня есть страница с фиксированной панелью ссылок на стороне. Я хотел бы прокрутить до различных div. По сути, это всего лишь один длинный веб-сайт, на котором я бы хотел прокрутить список различных элементов, используя боковое меню.

Вот JQuery у меня до сих пор

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

Проблема в том, что он автоматически переходит к контакту div, когда загружается, а затем, когда я нажимаю #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 tshauck
источник
Как выглядит HTML, где должна быть контактная ссылка?
Джеймс Блэк
Это может быть дубликатом stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery
Джеймс Блэк
3
Есть ли причина, по которой вы используете jQuery вместо простых старых якорей?
brianpeiris
2
@James - Это не совсем дубликат Этот вопрос прокручивает страницу до конкретного div. Этот вопрос прокручивает страницу с определенными приращениями (независимо от того, что показывает div).
Питер Айтай
Это действительно хорошо: css-tricks.com/snippets/jquery/smooth-scrolling . Работал на меня.
Maahd

Ответы:

342

Во-первых, ваш код не содержит contactdiv, у него есть contactsdiv!

В боковой панели у вас есть contactв div в нижней части страницы, у вас есть contacts. Я удалил финал sдля примера кода. (вы также неправильно написали projectslinkидентификатор на боковой панели).

Во-вторых, взгляните на некоторые примеры, нажав на справочную страницу jQuery. Вы должны использовать click like, object.click( function() { // Your code here } );чтобы привязать обработчик события click к объекту .... Как в моем примере ниже. Кроме того, вы также можете просто вызвать щелчок на объекте, используя его без аргументов, как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>

Петр Айтай
источник
Рад, что это помогло, но я думаю, что вы имеете в виду «маринованные», хотя я считаю, что лучше съесть их, чем выбраться из них.
Питер Айтай
Он не прокручивается при первом нажатии. : / Я нажимаю на него второй раз, и он работает.
Бурак Каракуш
Я думаю, что более логично поместить ID в href следующим образом: href = "# about" jsfiddle.net/onigetoc/w5muyern
Джино
это не работает в первый раз. но когда мы нажимаем второй раз, то его работа отлично.
Сатиш Сингх
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
источник
Боюсь, у меня все еще есть подобные проблемы. Загрузка страниц прокручивается вниз по странице на определенное количество, а не на контактный блок, и ссылка также не приводит меня к контактному блоку. Спасибо, что. РЕДАКТИРОВАТЬ: скажем, я делаю div с использованием top с 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» оно прокручивало свое внутреннее содержимое (div .post) до последнего, такого как чат. Итак, делайте следующее при добавлении нового .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 кординаты этого элемента div с помощью метода .left .
Эти методы происходят из CSS-позиционирования.
Как только мы получим x & y cordinates, мы можем использовать scrollTo () javascript ; метод.
Этот метод прокручивает документ до определенной высоты и ширины.
Он принимает два параметра как x & y cordinates. Синтаксис: window.scrollTo (x, y);
Затем просто передайте x & y cordinates элемента 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>

Просто так.

Армин Ахлаг
источник
Пожалуйста, пролейте больше света на это. Это не сработало для меня.
Ифесиначи Брайан