javascript - 如何使此滚动到 div 脚本 "smooth"

标签 javascript jquery html css

所以我从这个网站的用户那里找到了这个脚本,但是我不记得作者了。该脚本正在运行,但我希望它滚动得更“流畅”,而不是立即出现在我想要的信息处。如果可能,让目标显示在 div 上方 300 像素处。

我该怎么做?

#general{
  margin-top:900px; 
  height: 100px;
  weight:  100px;
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var hashTagActive = "";
$(".scroll").click(function (event) {
    if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
        event.preventDefault();
        //calculate destination place
        var dest = 0;
        if ($(this.hash).offset().center > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
        } else {
            dest = $(this.hash).offset().center;
        }
        //go to destination
        $('html,body').animate({
            scrollTop: dest
        }, 2000, 'swing');
        hashTagActive = this.hash;
    }
});
</script>
<div>
<a class="scroll" href="#general">Hello</a>
</div>
<div id="general">
</div

最佳答案

为了更流畅的滚动,您可以使用:

$(document).ready(function() {
  $("ANCHOR LINK").click(function(event){     
    event.preventDefault();
    $("html, body").animate({scrollTop:$(this.hash).offset().top}, 1000);
  });
});

你看到最后一个数字了吗? 1000,变大变慢。

第二件事恐怕我帮不了你。

关于javascript - 如何使此滚动到 div 脚本 "smooth",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28842645/

相关文章:

javascript - 如何在jquery中访问iframe dom元素

html - 如何在较小的容器中对齐较大的图像中心

javascript - jQuery 检查输入值是否随变化而增加/减少

javascript - 如何让 skrollr.js 与 turbolinks 一起工作

javascript自定义人性化过滤器

javascript - 如何从字符串中获取数据集?

jquery - 使用 Jquery 选择器选择下一个带有 className 的 Span

javascript - 如何创建一个 div 并根据不断变化的变量为其指定 ID?

javascript - 如何让一个简单的 <audio> 元素在滚动时停留在浏览器窗口的底部?

javascript - 单击更改数据属性