jquery锚点跳转+自动显示隐藏回到顶端代码

最新推荐文章于 2019-07-01 10:31:35 发布

张高伟

最新推荐文章于 2019-07-01 10:31:35 发布

阅读量834

点赞数

分类专栏： jquery

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_36663951/article/details/73087642

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery锚点跳转+自动显示隐藏回到顶端代码</title>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.gddh{ width:80px; height:100px; position:fixed; background-color:#06C; right:0px; display:none; }
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$(".gddh").css("top",($(window).height()-$(".gddh").height())/2);
$(document).scroll(function(){
if($(document).scrollTop()>200){$(".gddh").css("display","block")}else{$(".gddh").css("display","none")};
})
$("#m1").click(function(){$("html,body").animate({scrollTop: $("#p1").offset().top}, 1000);});
$("#m2").click(function(){$("html,body").animate({scrollTop: $("#p2").offset().top}, 1000);});
$("#m3").click(function(){$("html,body").animate({scrollTop: $("#p3").offset().top}, 1000);});
$("#ys").click(function(){$("html,body").animate({scrollTop:0}, 1000);});
$("#yw").click(function(){$("html,body").animate({scrollTop:($(document).height())}, 1000);});
});
</script>
<body>
<div class="gddh" ><a id="ys">回到页首</a> <br><br> <a id="yw">回到页尾</a></div>
<a id="m1">1111</a> <a id="m2">2222</a> <a id="m3">3333</a>
<h2 id="p1">1111</h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="p2">2222</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="p3">3333</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery锚点跳转+自动显示隐藏回到顶端代码

> html> head> meta charset="utf-8"> title>jquery锚点跳转+自动显示隐藏回到顶端代码title> head> script type="text/javascript" src="js/jquery.min.js">script> style type="text/css"> .gddh{ width:80px; height:100p
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。