Jquery滚动到基于数据属性的部分

Jquery scroll to section based on data attribute

本文关键字：数据属性 滚动 Jquery      更新时间：2023-11-13

我尝试制作这些图像，当您单击它们时，它们会滚动到data-down属性中给定的id。然而，当我尝试它的时候，它并没有打滑。当您对包含要滚动到的id的变量进行控制台日志记录时，它是正确的，所以我不知道为什么它不起作用。

<header>
    <div id="header-content">
        <h1>Welcome to the JETS Lake Garda Campaign</h1>
        <img class="down" data-down="#about" src="images/down.png">
    </div>
</header>
<section id="about">
    <h2>About Us</h2>
    <p>Libero minus dicta, sapiente, dolor, quidem quisquam magnam expedita eos voluptates saepe itaque maiores facilis sit nihil consequuntur vero hic possimus inventore autem. Voluptate amet dicta corporis dolorum facilis, quisquam.</p>
    <img class="down" data-down="#sailors" src="images/down.png">
</section>
<section id="sailors">
    <h2>Sailors</h2>
    <p>Libero minus dicta, sapiente, dolor, quidem quisquam magnam expedita eos voluptates saepe itaque maiores facilis sit nihil consequuntur vero hic possimus inventore autem. Voluptate amet dicta corporis dolorum facilis, quisquam.</p>
    <div class="down" data-down="#sponsors" src="images/down.png">
</section>
<section id="sponsors">
    <h2>Sponsors</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, itaque, pariatur. Aliquam ab in, ullam nostrum quis eos, commodi at? Eos quod amet dignissimos dolorum consequuntur adipisci dolore ducimus quis.</p>
</section>

$(document).ready(function () {
    $('.down').on('click', function () {
        var toGo = $(this).data('down');
        console.log(toGo);
        $('html,body').animate({
            scrollTop: $(toGo).offset.top
        }, 'slow');
    });
});

http://jsfiddle.net/8bc15bdu/

您必须用$(toGo).offset().top 替换$(toGo).offset.top

偏移量是一个函数，因此您应该这样访问它：

$(document).ready(function() {
  // Navigation buttons
  $('.down').on('click', function(){
    var toGo = $(this).data('down');
    $('html,body').animate({
      scrollTop: $(toGo).offset().top
    }, 'slow');
  });
});

这是一个更新的工作示例。

用$(toGo).offset().top 替换$(toGo).offset.top

您可以尝试使用"scrollTo"jQuery扩展。我在几个项目中使用过它，它非常容易实现和调试：）

https://github.com/flesler/jquery.scrollTo

相关文章：