js,jq,锚点 分别实现返回顶部
来源:互联网 发布:cctv2郑州淘宝诈骗 编辑:程序博客网 时间:2024/06/05 04:02
效果预览:
锚点实现:
锚点效果生硬,用户体验差,但没兼容性问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ display: block; margin: 0 auto; } a{ display: block; width: 33px; height: 36px; background-color: #999999; color: white; text-decoration: none; font-size: 14px; padding: 5px; position: fixed; right: 15px; bottom: 50px; text-align: center; } </style> </head> <body> <img src="../img/tb_bg.jpg" alt="" /> <a href="#">返回顶部</a> </body></html>
js 实现:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ display: block; margin: 0 auto; } a{ display: block; width: 33px; height: 36px; background-color: #999999; color: white; text-decoration: none; font-size: 14px; padding: 5px; position: fixed; right: 15px; bottom: 50px; text-align: center; } </style> </head> <body> <img src="../img/tb_bg.jpg" alt="" /> <a id="return_top">返回顶部</a> <script type="text/javascript"> window.onload = function(){ var clientHeight = document.documentElement.clientHeight; var button_a = document.getElementById("return_top"); var timer = null; var isTop = true; window.onscroll = function(){ var w_top = document.documentElement.scrollTop || document.body.scrollTop; if(w_top >= clientHeight){ button_a.style.display = "block"; }else{ button_a.style.display = "none"; } if(!isTop){ clearInterval(timer); } isTop = false; } button_a.onclick = function(){ timer = setInterval(function(){ var w_top = document.documentElement.scrollTop || document.body.scrollTop; var is_t = Math.floor(-w_top / 6); document.documentElement.scrollTop = document.body.scrollTop = w_top + is_t; isTop = true; if(w_top == 0){ clearInterval(timer); } },30); } }; </script> </body></html>
jq实现:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ display: block; margin: 0 auto; } a{ display: block; width: 33px; height: 36px; background-color: #999999; color: white; text-decoration: none; font-size: 14px; padding: 5px; position: fixed; right: 15px; bottom: 50px; text-align: center; } </style> </head> <body> <img src="../img/tb_bg.jpg" alt="" /> <a class="return_top">返回顶部</a> <script type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var w_top = $(window).scrollTop(); var k_height = $(window).height(); if(w_top >= k_height){ $(".return_top").css("display","block"); }else{ $(".return_top").css("display","none"); } }); $(".return_top").click(function(){ $("body,html").animate({ scrollTop: 0 },500); }); }); </script> </body></html>
阅读全文
0 0
- js,jq,锚点 分别实现返回顶部
- jq锚点动作加返回顶部
- js实现返回顶部
- jq返回顶部
- JQ之返回顶部
- JS实现返回页面顶部
- 返回到顶部JS实现
- js实现返回页面顶部
- JQ实现点击返回顶部(有动画过渡)
- 基于JQ返回顶部代码
- JS(JQ)实现带动画的回到顶部效果
- 分别使用JQ和JS实现定时弹窗
- js和jq分别实现点击显示隐藏的功能
- 返回顶部的js实现(jQuery/MooTools)
- js+JQuery实现返回顶部功能
- js+JQuery实现返回顶部功能
- js+JQuery实现返回顶部功能
- JS实现让页面返回顶部
- 70. Climbing Stairs
- 利用ajax+jquery 实现一对多关系中select列表的联动
- 欧几里得算法&&扩展欧几里得算法<数论>
- struts2执行原理(执行流程)
- SCU 4438 Censor KMP/Hash
- js,jq,锚点 分别实现返回顶部
- Kotlin(六)
- android 开发常用链接(自用,不定时更新)
- Kotlin学习笔记(一):AndroidStduio配置Kotlin环境
- layui弹出iframe
- 400. Nth Digit
- Palindrome Number
- 一个3D引擎Demo 源码
- 人工智能再次战胜人类,强势闯入医疗【智库2861】