现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。
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
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...