jQuery - 平滑滚动到div

时间:2013-08-01 06:13:21

标签: jquery scroll

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

这是脚本

$('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 :)请

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

这是菜单的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