滚动到HTML网站中的顶部JavaScript [英] Scroll to top JavaScript in HTML Website
本文介绍了滚动到HTML网站中的顶部JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在我的网站上实现滚动到顶部的功能：www.arrow-tvseries.com。
在网站上可以看到按钮它不能正常工作，因为当点击它时不滚动到页面的顶部。更重要的是，我希望滚动到顶部按钮在向下滚动时可见，比如一半的页面。
以下是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代码（头标）：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Frameset // ENhttp://www.w3.org/TR/html4/frameset.dtd >< head>
< title> Arrow-TvSeries - Home< / title>
< link rel =stylesheettype =text / csshref =style.css>
<！ - 返回页首链接 - >
< link rel =stylesheettype =text / csshref =back_to_top.css>
< script src =/ scripts / back_to_top.jstype =text / javascript>< / script>
<！ - 返回页首链接的结尾 - >
< meta property =fb：adminscontent ={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 =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1>
< meta name =descriptioncontent =Arrow Tv Show>
< meta name =keywordscontent =arrow，tv show，amel，stephen amell，katie cassidy，oliver，oliver queen，queen>
< meta name =authorcontent =StåleRefsnes>
< meta charset =UTF-8>
<！ - IPAD设定 - >
< meta name =viewportcontent =width = 730，initial-scale = 0.70，minimum-scale = 0.5，maximum-scale = 1.25/>
< / head>
CSS代码：
#backtotop {
cursor：pointer;
/ * display：none; * /
margin：0px 0px 0px 370px;
位置：固定;
bottom：10px;
font-size：90％;
padding：10px;
width：100px;
text-align：center;
背景颜色：＃000;
border-radius：8px;
-webkit-border-radius：8px;
-moz-border-radius：8px;
filter：alpha（opacity = 60）;
-khtml-opacity：0.6;
-moz-opacity：0.6;
不透明度：0.6;
颜色：#FFF;
font-size：14px;
z-index：10000;
font-family：arial;
}
#backtotop：hover {
filter：alpha（opacity = 90）;
-khtml-opacity：0.9;
-moz-opacity：0.9;
不透明度：0.9;
}
如果您需要更多的代码或信息，请随时告诉我们。 / p>
谢谢
解决方案
试试这个，让我知道它是不是working：
<！DOCTYPE html>
< html>
< head>
< style>
input.pos_fixed
{
position：fixed;
top：30px;
right：5px;
}
< / style>
< script>
函数scrollWindow（）
{
window.scrollTo（0,0）;
}
< / script>
< / head>
< body>
< br>
< input class =pos_fixedtype =buttononclick =scrollWindow（）value =Scroll/>
< br>
< / body>
< / html>
I am trying to implement the scroll to top feature in my website: 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:
<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):
<!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:
#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
解决方案
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>
这篇关于滚动到HTML网站中的顶部JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
