jQuery使用.scroll滚动到一个元素（处理程序）

我想从页面顶部向下滚动一定距离后，滚动到页面上的目标元素。所以元素的滚动由.scroll（）事件触发。我已经能够做到这一点使用下面的代码：jQuery使用.scroll滚动到一个元素（处理程序）

$(document).scroll(function(e) { 
    if ($(document).scrollTop() > 250) { 
     $('html, body').animate({ 
      scrollTop: $("#cy-hero-image").offset().top 
     }, 650); 
    } 
});

但问题是，一旦该事件已经被滚动的页面棍棒这个滚动位置触发。我该如何编写这段代码，当它从页面顶部滚动时，它只跳转到这个页面位置？

这是我到目前为止的JSFiddle。

来源

2016-04-26 CodeMode

你可以添加一个变量来检查它是否从排名榜首。

var startsFrom = 0; 
$(document).scroll(function(e) { 
    if($(document).scrollTop() == 0) //you can adjust it to match whatever you want 
    startsFrom = 0; 
    if ($(document).scrollTop() > 250 && startsFrom == 0) { 
    startsFrom = $(document).scrollTop(); 
    $('html, body').animate({ 
     scrollTop: $("#targeted-element").offset().top 
    }, 650); 
    } 
});

https://jsfiddle.net/pdyu3f5b/14/

来源

2016-04-26 18:07:44

为您的函数命名并使用.one()附加您的处理函数。如果断点不符合，重新附加处理程序。

var myScrollFunc = function(e){ 
    if ($(document).scrollTop() > 250) { 
    $('html, body').animate({ 
     scrollTop: $("#targeted-element").offset().top 
    }, 650); 
    } else { 
    $(document).one('scroll', myScrollFunc); 
    } 
} 

$(document).one('scroll', myScrollFunc);

JSFiddle

来源

2016-04-26 18:03:47 George

出于好奇，如果他要来命名的功能是什么使用'一个（）'而不仅仅是'关（）'一旦条件满足的好处？ – Trey

@Trey这是一个很好的问题。也许你有什么东西。 – George

我不知道one（）方法。非常有用的感谢！ – CodeMode

它的使用

var myScroll = function(e) { 
    if ($(document).scrollTop() > 250) { 
     $('html, body').animate({ 
      scrollTop: $("#cy-hero-image").offset().top 
     }, 650); 
     $(document).off(e); 
    } 
}); 
$(document).on('scroll', myScroll);

来源

2016-04-26 18:08:24 Trey

后尝试它只是删除滚动处理。 当您访问页面的顶部时，它每次都在工作。

var isScroll = true; 
$(document).scroll(function(e) { 
    if ($(document).scrollTop() > 250 && isScroll) { 
    isScroll = false; 
    $('html body').animate({ 
     scrollTop: $("#targeted-element").offset().top 
    }, 650); 
    }else if($(document).scrollTop() < 250){ 
    isScroll = true; 
    } 
});

JSFiddle

来源

2016-04-26 18:41:38

@CodeYoda，这有用吗？ –

jQuery使用.scroll滚动到一个元素（处理程序）

回答

相关问题