Question

我使用以下jquery让我的链接滚动到下一个div。但是，我遇到了一个问题。从页面顶部开始，脚本运行正常。一旦我点击另一个div的链接（页面下方的另一个链接），脚本只向上或向下滚动到目前为止但不向下一个指定的div滚动。如何使脚本从链接所在位置的当前位置完全滚动？

$(function() {
$('#nav a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body, #container, .main').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');
    event.preventDefault();
 });
});

Answer 1

您在此处有错误：

scrollTop: $($anchor.attr('href')).offset().top
     //------^^^^^^^---------------------------------this itself a selector

更改为此并尝试：

scrollTop: $anchor.attr('href').offset().top

或者这个：

 $('#nav a').bind('click',function(event){
    var $anchor = $(this).attr('href');
    $('html, body, #container, .main').stop().animate({
        scrollTop: $($anchor).offset().top
    }, 1500,'easeInOutExpo');
    event.preventDefault();
 });

CHECKOUT IN FIDDLE

Answer 2

你没有打电话给正确的地方......

这应该可以解决问题......首先设置锚点。

$(function() {
$('#nav a').bind('click',function(event){
    var $anchor = $(this).attr('href');

    $('html, body, #container, .main').stop().animate({
        scrollTop: $($anchor).offset().top
    }, 1500,'easeInOutExpo');
    event.preventDefault();
 });
});

Answer 3

好的，所以我已经让你成为一个JSFiddle，js代码重写了下面的代码，但你可以看看这里的全部内容：http://jsfiddle.net/re7Xc/

$(function() {
     $('a.scrolltonext').click(function(event){
     event.preventDefault();
     var parentblock = $(this).parent();
     var nextblock = parentblock.next();
     //nextblock.css('background-color','#00f');

         if(nextblock.size()>0) {
              $('html, body').stop().animate({
                   'scrollTop': nextblock.offset().top
              }, 800);
         }
     }); 
});

这个脚本中的catch虽然是我把链接放在div本身，所以它不在某个地方的#nav中。因此，如果您将链接放在#nav中，则必须重写该部分！

我也在那里放了一个if语句，因为我认为在滚动之前检查是否有next-div会更好。

希望它有道理，让我知道它是否适合你！欢呼声

jquery滚动不会从精确位置滚动

3 个答案:

CHECKOUT IN FIDDLE