回顶部

最新推荐文章于 2024-04-30 15:33:06 发布

Kawaboger

最新推荐文章于 2024-04-30 15:33:06 发布

阅读量496

点赞数 1

分类专栏：页面技术文章标签： jquery css

本文链接：https://blog.csdn.net/kawaboger/article/details/39496291

版权

页面技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//首先将#goto_top隐藏
	$("#goto_top").hide();
	//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
	$(function () {
		$(window).scroll(function(){
			if ($(window).scrollTop()>100){
				$("#goto_top").fadeIn(1500);
			}
			else
			{
				$("#goto_top").fadeOut(150);
			}
		});
		//当点击跳转链接后，回到页面顶部位置,滚动条跳到0的位置，页面移动速度是800
		$("#goto_top").click(function(){
			$('body,html').animate({scrollTop:0},800);
			 false;
		});
	});
});
</script>
<style type="text/css">
.goto_top{
	z-index:99;
	margin-top:-80px;
	}
</style>
</head>

<body id="top">
    <div id="di1" class="di" style="background-color:#09C; height:800px;"  ></div>
    <div id="goto_top" class="goto_top" align="center" >
    	<img src="Top.gif" class="pic"/>
    </div>
    <!-- 利用传统的锚 定位-->
    <div id="di2" class="di" style="background-color:#099; height:800px;"  ></div>
    <div align="right">
    	<a href="#top"><img src="Top.gif"/></a>
    </div>
</body>
</html>

Kawaboger

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
回顶部

无标题文档$(document).ready(function(){ //首先将#goto_top隐藏 $("#goto_top").hide(); //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){
复制链接

扫一扫