本文摘自PHP中文网,作者V,侵删。
背景:
现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。
1、通过锚链接回到顶部,需要将body加入一个名为top的标记
1 | <a href= "#top" target= "_self" >回到顶部</a>
|
2、通过JavaScript的scroll回到顶部,控制水平和垂直方向
1 | <a href= "javascript:scroll(0,0)" >JavaScript回到顶部<s/a>
|
3、通过JavaScript控制,缓慢向上滑动,不过不够平滑
1 | <a onclick= "goScrollTop()" >JavaScript缓慢向上滑动</a>
|
1 2 3 4 5 6 7 8 9 10 11 | 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);
}
|
阅读剩余部分
相关阅读 >>
如何转换css元素的显示模式
css中的内联元素是什么
css框模型概念介绍
css如何设置不可点击
css link与import的区别是什么
对响应式web设计的方法实现
页面性能优化的方法总结
15 个优秀的响应式 web 设计 html 和 css 框架
css如何实现蒙版效果
css blueprint是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css实现快速回到顶部效果