Question

我尝试了几种不同的方式来顺畅地滚动到顶部。

我已经使用了这个代码和其他一些代码，特别是#top属性，但似乎没有任何效果。

我哪里出错了？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title>

<link href="basis.css" rel="stylesheet" type="text/css">
<link href="navigatie/menu.css" rel="stylesheet" type="text/css">
<script>$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});</script>

</head><body>

<div id="header">
  <a href="#top"><img src="navigatie/bb.png" alt="" width="100" height="100" id="Image1"></a>
</div>

blabla content

</body>
</html>

Answer 1

包含jQuery library

的CDN版本

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

在<head>部分。

或Download jQuery library并使用本地副本。

<script src="jquery-1.10.2.min.js"></script>

如果您使用本地副本，请不要忘记将jquery-1.10.2.min.js放在根文件夹中。

您也可以简化您的功能

$(function() {
  $('#header a').click(function() {
    $('html, body').stop().animate({ scrollTop: $($(this).attr('href')).offset().top }, 900, 'swing'); 
  });
});

Answer 2

我同意添加jQuery的其他帖子（你的例子没有提供它）。此外，为了更平滑的动画/过渡，您可能希望尝试使用与JS动画相对的CSS过渡。

这是一个关于CSS过渡的教程，使用jQuery平滑滚动到顶部。

http://mitgux.com/smooth-scroll-to-top-using-css3-animations

另外，我个人非常喜欢jQuery传输库，它使用jQuery来触发各种CSS转换。

http://ricostacruz.com/jquery.transit/

有关为什么CSS转换优于JS库动画效果please see this thread。

的更多信息祝你好运！

为什么我的平滑滚动不起作用？

2 个答案: