滚动到顶部未生效

Question

我有这个代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js</script>    
<script>
$(function() {
    $('a.scrollToTop, a[href=#top]').click(function(){
    $('html,body').animate({scrollTop:0}, 1500);
    return false;
    })
});
</script>

而正文中的这段代码：

<a name="top"></a>
<p><a href="#top">Back to the Top</a></p>

但它不起作用。有人知道这是为什么吗？我环顾四周，但找不到解决方案。

谢谢。

Answer 1

使用以下命令：

$(function() {
    $('a.scrollToTop, a[href=#top]').click(function(e){
        e.preventDefault();
        $('html,body').animate({scrollTop:0}, 1500);
        return false;
    });
});

您需要在带有 return false; 的行之后将})更改为 });。而且，由于您正在寻找<a>的点击，请使用 preventDefault() .

Answer 2

将 ID 添加到您的标签中

<p>
    <a href="#top" id="scrollTop">Back to the Top</a>
</p>

$('#scrollTop').click(function(){ 
    $('html,body').animate({ scrollTop: 0 }, 'slow');
    return false; 
});

Answer 3

已经有很多答案了，但我已经开始了，所以这是一个使用 id 的小提琴

http://jsfiddle.net/LRtXj/

$(function() {
    $("#top").click(function(){
        $("html, body").animate({ scrollTop: "0px" }, 1500);
        return false;
    })
});
 <p><a href="#" id="top">Back to the Top</a></p>