滚动到顶部Javascript代码无效

时间:2015-04-13 16:50:18

标签: javascript html css

我从以下网站复制并粘贴了我的网页中滚动到顶部的代码:

http://jsfiddle.net/neeklamy/RpPEe/

即使滚动到顶部按钮没有显示, 我的网页源代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Rough</title>
<style type ="text/css">
.scrollup {
width: 40px;
height: 40px;
position: fixed;
bottom: 50px;
right: 100px;
display: none;
text-indent: -9999px;
background: url('icon_top.png') no-repeat;
background-color: #000;
}
</style>
<script>
$(document).ready(function () {

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});

$('.scrollup').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

});
</script>
</head>
<body>
<h1>Top of the page</h1>

<article style="height: 1000px">
<p style="margin-bottom: 600px">Scroll down the page&hellip;</p>
<p>Then click the box.</p>
<a href="#" class="scrollup">Scroll</a>
</article>
</body>
</html>

2 个答案:

答案 0 :(得分:5)

你缺少jQuery,像这样添加脚本标签:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>

或通过下载库并将其添加到项目文件中在本地添加。

使用JSFiddle:http://jsfiddle.net/nayish/uLt7guvg/2/

答案 1 :(得分:0)

你错过了'icon_top.png'文件。您必须将该图像与.html文件放在同一文件夹中。