jQuery нажмите ссылку найти div с соответствующим идентификатором scrollTo

Question

Я создаю страницу.У меня есть следующий HTML-код:

        <ul id="nav">
            <li><a href="#section1">Link</a></li>
            <li><a href="#section2">Link</a></li>
            <li><a href="#section3">Link</a></li>
            <li><a href="#section4">Link</a></li>
            <li><a href="#section5">Link</a></li>
            <li><a href="#section6">Link</a></li>
        </ul>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section1">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section2">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section3">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section4">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section5">
            <p>Content</p>
        </div>

        <div class="section">
            <p>Content</p>
        </div>

        <div class="section" id="section6">
            <p>Content</p>
        </div>

Чего я хотел бы добиться - это щелкнуть ссылку.Используйте jQuery, чтобы найти div с тем же идентификатором, что и ссылки href, а затем прокрутить страницу до этого div.Может кто-то указать мне верное направление?Я сталкиваюсь с тем, как сопоставить идентификатор с href.

Большое спасибо.

Answer 1

Добавьте событие клика к каждому из тегов привязки. Используйте функцию attr , чтобы получить ссылку на выделенный элемент.

Затем я использовал функцию animate для прокрутки к этому элементу.

$(function(){
    $('#nav li a').click(function(){
        var divID = $(this).attr('href');
        $('html,body').animate({
            scrollTop: $(divID).offset().top 
        }, {
            duration: 'slow', 
            easing: 'swing'
        }); 
    }); 
});

Answer 2

Вы можете достичь этого следующим образом:

$('#nav li a').click(function(){
    //Scroll to targetID offsetTop.. or using the scrollTo plugin, scrolling to $($(this).attr('href'))
})

scrollTo плагин

Answer 3

Попробуйте что-то вроде этого:

$('#nav a').click(function(){
  $($(this).attr('href')).whatyouwant();
});