Question

我的网页使用平滑滚动时遇到了一些困难。我在页面顶部有一个导航栏，上面有4个选项。每个选项对应于页面下方的一个部分。我希望能够点击导航栏中的这些项目，并顺利向下滚动到相应的部分。我已经尝试过利用以下两个问题（在其他几个在线资源中!!），但我似乎无法让它工作。任何提供的援助将不胜感激！代码的汇总版本在

之下

jQuery scroll to element

Smooth scroll anchor jquery

HTML

<ul id="navbar">
            <li><a class="about" href="#about">ABOUT</a></li>
            <li><a class="shop" href="#shop">SHOP</a></li>
            <li><a class= "featured" href="#featured">FEATURED</a></li>
            <li><a class="updates" href="#updates">UPDATES</a></li>
        </ul>

<div id="handcrafted"></div>
<div id="shop"></div>
<div id="featured"></div>
<div id="updates"></div>

JS

$('.about').click( function() {
     $('html, body').animate({
          scrollTop: $('#about').offset().top
     }, 400);
});


$('.shop').click( function() {
     $('html, body').animate({
          scrollTop: $('#shop').offset().top
     }, 400);
});



$('.featured').click( function() {
     $('html, body').animate({
          scrollTop: $('#featured').offset().top
     }, 400);
});



$('.updates').click( function() {
     $('html, body').animate({
          scrollTop: $('#updates').offset().top
     }, 400);
});

Answer 1

<div id="handcrafted"></div>应为<div id="about"></div>

如果您正在处理<a>，我建议您始终添加e.preventDefault()，除非您想要纯<a>。

$('a').click( function(e) {
     e.preventDefault()
     $('html').animate({
          scrollTop: $($(this).attr('href')).offset().top
     }, 400);
});

div{
  height: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="navbar">
            <li><a class="about" href="#about">ABOUT</a></li>
            <li><a class="shop" href="#shop">SHOP</a></li>
            <li><a class= "featured" href="#featured">FEATURED</a></li>
            <li><a class="updates" href="#updates">UPDATES</a></li>
        </ul>

<div id="about">ABOUT</div>
<div id="shop">SHOP</div>
<div id="featured">FEATURED</div>
<div id="updates">UPDATES</div>

jQuery利用平滑滚动

1 个答案: