jQuery 单击链接查找具有匹配 id 的 div 滚动到

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 查找与链接 href 具有相同 id 的 div，然后将页面滚动到该 div。有人能指出我正确的方向吗？我遇到的问题是如何将 id 与 href 相匹配。

非常感谢。

Answer 1

向每个锚标记添加单击事件。使用 attr 函数获取所选元素的 href。

然后我使用 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();
});