在 HTML 网站中滚动到顶部 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17199724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to top JavaScript in HTML Website
提问by Matthew Borg Carr
I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com.
我正在尝试在我的网站上实现滚动到顶部的功能：www.arrow-tvseries.com。
The "button" is seen on the website however it does not work properly, because when clicked its not scrolling to the top of the page. More over I would like that the "Scroll to top button" is visible when scrolled down, say half the page.
在网站上可以看到“按钮”，但是它不能正常工作，因为当点击它时它没有滚动到页面顶部。更重要的是，我希望向下滚动时可以看到“滚动到顶部按钮”，比如页面的一半。
Here is the javascript code:
这是javascript代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
HTML Code (Head Tag):
HTML 代码（标题标签）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--back to top links-->
<link rel="stylesheet" type="text/css" href="back_to_top.css">
<script src="/scripts/back_to_top.js" type="text/javascript"></script>
<!--end of back to top links-->
<meta property="fb:admins" content="{793705343}"/>
<!--Google Analytics-->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
ga('send', 'pageview');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Arrow Tv Show">
<meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen">
<meta name="author" content="St?le Refsnes">
<meta charset="UTF-8">
<!--IPAD setting-->
<meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5, maximum-scale = 1.25"/>
</head>
CSS Code:
CSS 代码：
#backtotop {
cursor : pointer;
/*display : none;*/
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter: alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 10000;
font-family: arial;
}
#backtotop:hover {
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}
Please feel free and let me know if you require further code or information.
如果您需要更多代码或信息，请随时告诉我。
Thanks
谢谢
回答by kishoredbn
Try this and let me know if it is not working:
试试这个，如果它不起作用，请告诉我：
<!DOCTYPE html>
<html>
<head>
<style>
input.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
<script>
function scrollWindow()
{
window.scrollTo(0,0);
}
</script>
</head>
<body>
<br>
<input class="pos_fixed" type="button" onclick="scrollWindow()" value="Scroll" />
<br>
</body>
</html>
回答by Ankit Zalani
You can do the same thing with below code:
你可以用下面的代码做同样的事情：
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Try this. Hope it helps.
试试这个。希望能帮助到你。
回答by Nick R
You could do something like this:
你可以这样做：
$(window).scroll(function() {
// if you have scrolled down more than 200px
if($(this).scrollTop() > 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').bind('click', function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},800);
});
回答by Chris Mukherjee
The problem is that your javascript file is actually written in HTML.
问题是您的 javascript 文件实际上是用 HTML 编写的。
In your HTML headsection, you should have:
在您的 HTMLhead部分，您应该有：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/back_to_top.js" type="text/javascript"></script>
Then your back_to_top.jsshould contain onlythe following:
那么你back_to_top.js应该只包含以下内容：
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
