web一键返回顶端html代码,CSS-返回顶部代码_html/css_WEB-ITnose
现在的网站基本上都是长页面，多的有四五屏，少的话也有两三屏，页面太长有的时候为了提升用户体验，会在页面右边出现一个回到顶部的按钮，这样能快速回到顶部，以免在滑动页面出现视觉屏幕，回到顶部一般有四种方式。
1.通过锚链接回到顶部,需要将body加入一个名为top的标记:
2.通过JavaScript的scroll回到顶部,控制水平和垂直方向:
3.通过JavaScript控制，缓慢向上滑动，不过不够平滑，代码参考如下:
function goScrollTop() { //把内容滚动指定的像素数(第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数) //向上是负数，向下是正数 window.scrollBy(0, -100); //延时递归调用，模拟滚动向上效果 scrolldelay = setTimeout('goScrollTop()', 100); //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值 var sTop = document.documentElement.scrollTop + document.body.scrollTop; //判断当页面到达顶部，取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面) if (sTop == 0) clearTimeout(scrolldelay); }
4.当滚动条滚动到一定位置的时候显示，滚动条向上回滚的时候隐藏向上的回到顶部按钮，这种方式是最常用的方式:
Go
jQuery代码:
function goTop(min_height) { $(".goTop").click( function() { $('html,body').animate({ scrollTop: 0 }, 700); }); //获取页面的最小高度，无传入值则默认为600像素 min_height=min_height?min_height:400; //为窗口的scroll事件绑定处理函数 $(window).scroll(function() { //获取窗口的滚动条的垂直位置 var s = $(window).scrollTop(); //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐 if (s > min_height) { $(".goTop").fadeIn(100); } else { $(".goTop").fadeOut(200); } }); } $(function() { goTop(); });
CSS代码:
//博客园-FlyElephant .goTop { height: 40px; width: 40px; background: red; border-radius: 50px; position: fixed; top: 90%; right: 3%; display: none; } .goTop span { color: #fff; position: absolute; top: 12px; left: 8px; }
以上就是常用的样式，如有更好的方式，欢迎探讨~
声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理
web一键返回顶端html代码,CSS-返回顶部代码_html/css_WEB-ITnose相关推荐
- 利用css完成表格的代码,css 表格(示例代码)
1.给元素的display属性添加为以下值 table使该元素按table样式渲染 table-row使该元素按tr样式渲染 table-cell使该元素按td样式渲染 table-row-group ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
- 迅速返回页面顶部代码
<迅速返回页面顶部代码> <DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: p ...
- mysql教程详解之多表联合查询,MYSQL教程mysql多表联合查询返回一张表的内容实现代码...
搜索热词 <MysqL教程MysqL多表联合查询返回一张表的内容实现代码>要点: 本文介绍了MysqL教程MysqL多表联合查询返回一张表的内容实现代码,希望对您有用.如果有疑问,可以联系 ...
- sqlsession.selectlist 会返回null么_StackOverflow经典问题：代码中如何去掉烦人的“!=nullquot;判空语句...
推荐阅读: 程序员引路人:腾讯T4曰"面试不仅仅是技术过硬就可以了,你还需要懂得这些"zhuanlan.zhihu.com 问题 为了避免空指针调用,我们经常会看到这样的语句 i ...
- sqlsession.selectlist 会返回null么_如何在Java代码中去掉烦人的“!=null”
问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc(); } 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何 ...
- jquery实现：返回顶部（动画·代码精简版）- 代码篇
jquery实现:返回顶部(动画·代码精简版):animate 使用css3的animate属性,一行代码就能实现功能. 动画演示(省略) 代码如下:(精简) <script type=&quo ...
- Xpath在选择器中正确，在代码中返回的是空列表问题
Xpath在选择器中正确,在代码中返回的是空列表问题 一.问题: 在进行爬虫的时候我们会用到xpath解析html文件,但是会有一种情况就是在xpath选择器中可以使用,但是在代码中就无法使用的情况. ...
- c语言怎么返回数组,c++从函数返回数组的方法代码
c++如何从函数返回数组? C++ 从函数返回数组 C++ 不允许返回一个完整的数组作为函数的参数.但是,您可以通过指定不带索引的数组名来返回一个指向数组的指针. 如果您想要从函数返回一个一维数组,您 ...
最新文章
- PHP SOAP 扩展的使用
- DCMTK：DSRDocumentTree，DSRDocumentSubTree，DSRDocumentTreeNode和DSRContentItem类的测试程序
- log4j配置_是时候了解一下log4j2各种配置的含义了！
- CNN卷积神经网络：权值更新公式推导
- 反应灵敏且性能卓越的Spray + Akka解决方案，以“在Java和Node.js中发挥并发性和性能”...
- 面试官最常问的垃圾回收器CMS
- hive jdbc连接时的乱码问题
- 借贷宝java_【人人行(借贷宝)Java面试】借贷宝java后端开发面经。-看准网
- (转)Android之发送短信的两种方式
- 联想硬盘保护系统计算机名,联想硬盘保护系统EDU7.0安装方法
- Java通信之服务器生猛上手
- eDP接口信号组成认识
- Redis 远程连接（ redis.conf 配置 auth 认证 重启 redis）
- 前端生成二维码 微信小程序
- python中turtle画笑脸_如何用python画笑脸
- 受用一生的心理寓言(转)
- HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
- 2022年第三届MathorCup高校数学建模挑战赛——大数据竞赛(baseline)
- 深度学习实践与大数据实践【二】
- CREO工程截面图如何一键去掉除截面后面多余的线