Jquery 动画返回顶部

Posted 2023-05-08

【中文标题】Jquery 动画返回顶部

【英文标题】：Jquery Animated Back to Top

【发布时间】：2012-02-15 08:05:54

【问题描述】：

我目前正在尝试制作一个按钮，该按钮将用户带回页面顶部，但具有动画效果。单击按钮时使页面向上滚动到顶部。我在这里搜索了一下，发现this..

我已经尝试使用以下方法制作JSfiddle...

CSS

html 
margin:0;
padding:0;
height:2000px;


body 
height:2000px;   


#blue-box 
position:fixed;
width:100px;
height:70px;
margin-left:0px;
margin-top:50px;
background-color:blue;     


#blue-box h1
font-family:Constantia;
font-size:20px;
text-align:center;
margin-top:5px;
color:#FFFFFF;

HTML

<div id="blue-box">
<h1>Back To Top</h1>
</div>

JavaScript

$(document).ready(function() 
var away = false;

$('#blue-box').click(function() 
$("html, body").animate(scrollTop: 0, 500);
);

不幸的是，这似乎不起作用，我想知道我是否遗漏了什么或做了一些明显错误的事情？

【参考方案1】：

脚本末尾缺少);。添加solves your problem:

$(document).ready(function() 
    var away = false;

    $('#blue-box').click(function() 
        $("html, body").animate(scrollTop: 0, 500);
    );
);  // <-- Here.

这是为什么正确缩进代码很重要的一个很好的例子。它使这种错误更难以错过。

【讨论】：

噢！谢谢，我完全是 javascript 新手，这需要我一段时间才能弄清楚。

【参考方案2】：

你忘记关闭你的 $(document).ready

http://jsfiddle.net/HX3ww/3/

【参考方案3】：

这也是一个细微的变化，按钮只会在您开始向下滚动页面时淡入，并在您返回页面顶部时消失http://jsfiddle.net/b4M66/

jQuery:

$(function() 
    $(window).scroll(function() 
        if($(this).scrollTop() != 0) 
            $('#toTop').fadeIn();    
         else 
            $('#toTop').fadeOut();
        
    );

    $('#toTop').click(function() 
        $('body,html').animate(scrollTop:0,800);
    );    
);​

CSS：

#toTop  position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; ​

HTML：

<div id="toTop">Back to Top</div>​