gpt4 book ai didi

javascript - 滚动到 HTML 网站中的顶部 JavaScript

转载 作者:太空宇宙 更新时间:2023-11-04 04:31:37 26 4
gpt4 key购买 nike

我正在尝试在我的网站中实现滚动到顶部功能: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//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 代码:

#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;
}

如果您需要更多代码或信息,请随时告诉我。

谢谢

最佳答案

试试这个,如果不起作用请告诉我:

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

关于javascript - 滚动到 HTML 网站中的顶部 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17199724/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com