CSS 返回顶部代码示例
前端  /  管理员 发布于 6年前   129
现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。
1.通过锚链接回到顶部,需要将body加入一个名为top的标记:
<a href="#top" target="_self">回到顶部</a>
2.通过JavaScript的scroll回到顶部,控制水平和垂直方向:
<a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>
3.通过JavaScript控制,缓慢向上滑动,不过不够平滑,代码参考如下:
<a onclick="goScrollTop()">JavaScript缓慢向上滑动</a>
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.当滚动条滚动到一定位置的时候显示,滚动条向上回滚的时候隐藏向上的回到顶部按钮,这种方式是最常用的方式:
<div class="goTop"> <span>Go</span></div>
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代码:
.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;}
到此这篇关于CSS 返回顶部代码示例的文章就介绍到这了,更多相关CSS返回顶部 内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
作者:FlyElephant
出处:http://www.cnblogs.com/xiaofeixiang
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号