Question

我目前正在尝试创建一个按钮，将用户带回页面顶部，但动画显示。单击按钮使页面向上滚动到顶部。我在这里搜索了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);
});

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

Answer 1

您在脚本末尾错过了});。添加solves your problem：

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

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

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

Answer 2

您忘记关闭$（文件）.ready

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

Answer 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>

Jquery动画回到顶部

3 个答案: