Question

您好我已经编写了一些代码，可以在点击后将页面滚动到一个元素，但在顺畅滚动之前它会跳转到页面顶部。有人可以解释一下我做错了吗？

这是脚本

$('a[href*="#"]').click(function(e){
        e.preventDefault();
    if($(this).attr('href') == '#') {
       $('html, body').animate({
        scrollTop: $('body').offset().top
       }, 1000);
       window.location.hash = '';
    } else {
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - $(this).height()
        }, 1000);   
        window.location.hash = $(this).attr('href');
    }
        return false;
});

并告诉我在哪里可以学习JS :)请

Answer 1

本教程和演示展示了如何实现这一目标。看看吧。 http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 2

这是菜单的HTML

<div class="menu">
  <div class="top">
    <ul class="menu_list">
      <li><a href="#">Start</a></li>
      <li><a href="#o_nas">About</a></li>
      <li><a  href="#services">Services</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
     </ul>
  </div>
</div>

这是菜单

的修改脚本

//menu smooth scroll to element
    $('a[href^="#"]').on('click',function(e){
        $target = $(this).attr('href');
       e.preventDefault();
        $('.active').removeClass('active');
        $(this).addClass('active');
        if($(this).attr('href') == '#') {

           $('html, body').stop().animate({
            scrollTop: $('body').offset().top
           }, 1000, function(){location.hash = $target;});
        } else {
            $('html, body').stop().animate({
                scrollTop: $($target).offset().top + 57 - $('.menu').height() 
//this is important to add + height of menu holder div in my case it's 57 this removes jump effect in firefox
            }, 1000,function(){location.hash = $target});

        }
        return false;
    });

我已经解决了我的问题，就是这样，上面的代码对我来说非常完美，我将它放在像其他程序员这样的我这里;）我们得到了单页网站，其中包含网址更改和平滑滚动效果： p

jQuery - 平滑滚动到div

2 个答案: