Question

我正在寻找一个JQuery解决方案，只在第一个滚动动作上自动滚动到页面上的第一个锚点。

网站的开放是一个带有向下箭头的全屏视频，让用户知道他们可以向下滚动查看更多部分。如果用户使用滚轮，我希望它立即向下滑动到第一部分，之后它可以回到正常滚动。

这有可能的解决方案吗？

Answer 1

你可以设置一个标志，只有当它为假时才执行动作，并在第一次滚动时将其设置为真：

＆＃13;

window.wasScrolled = false;
$(window).bind('scroll',function(){
    if (!window.wasScrolled){ $('html, body').animate({scrollTop:document.getElementById('to').getBoundingClientRect().top},1000)}
    window.wasScrolled = true;
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:4000px"></div>
<div id="to" style="background:black;height:10000px"></div>

＆＃13;

DEMO

Answer 2

获得第一个＆＃39; A＆＃39;的位置。元素名称＆＃39;属性（书签）然后用动画滚动到该位置，然后取消绑定滚动事件，使其不再触发。

$(window).scroll(function(e){
  var destination = $('a[name]').offset().top;
  //jQuery UI needed for animate function
  $("html,body").animate({scrollTop: destination}, 600, "easeOutExpo", function(){});
  unbindScroll();
});     

function unbindScroll(){
  $(window).unbind("scroll");
}

请参阅http://jsfiddle.net/sjmcpherso/ct3vkkr0/

Answer 3

jQuery有一个one（）方法，用于一次执行绑定函数。

＆＃13;

$('.scroll').one('scroll', function(e) {
  // jump to section
  // window.location.hash = 'section';
  alert('jumping to #section');
});

＆＃13;

.scroll {
  height: 100px;
  border: 1px solid red;
  overflow: auto;
}

.scroll div {
  height: 1000px;
  border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
  <div>
    scroll me
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <a id="section" name="section">first section</a>
  </div>
</div>

＆＃13;

JQuery滚动仅在第一次滚动时锚定

3 个答案:

DEMO