Question

我想做一件简单的事情。我有一个带有大全宽标题的网页。我需要将它一直滚动到第一个鼠标滚轮滚动的内容。

我有这样的事情：

    $(window).scroll(function() {
        $('html, body').animate({
            scrollTop: ($('.site-content').first().offset().top)
        },2000);
    });

它工作得很好，但是 - 首先它使短向下滚动（原始滚动）并在滚动动画开始之后。所以它看起来并不顺利。

如何顺利实现这一目标的最佳方式是什么？

Answer 1

这个没有经过测试;我现在不在电脑上

但请尝试更改

$(window).scroll(function(e) {
    e.preventDefault()
    $('html, body').animate({
        scrollTop: ($('.site-content').first().offset().top)
    },500);
});

但请记住，这会禁用用户滚动，而您的功能将具有完全控制权

Answer 2

仅在第一次滚动时？

var scrolled = false;
$(window).scroll(function(e) {
  if (scrolled == false) {
    $('html, body').animate({
      scrollTop: ($('.site-content').first().offset().top)
    }, 2000);
    scrolled = true;
  }
});

div {
  background-color: #000; 
  width: 100px; 
  height: 100px;
}

.site-content {
  background-color: #F00;
}

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="site-content"></div>
</body>

jQuery - 顺利滚动到内容

2 个答案: