“返回顶部”的简易代码及设计理念

1.介绍及思路分析：

在很多公司的网站中，鼠标滚动一定高度（以150px为例）之后，会出现“返回顶部”的标签。

“返回顶部”标签被固定到窗口的指定位置，位置始终不变。

当滚动的距离高度小于指定高度后，该“返回顶部”的标签消失。

另外，“返回顶部标签”绑定点击事件，通过鼠标点击，实现文档回到顶部的效果。

2.完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>返回顶部</title><style type="text/css">* {padding: 0;margin: 0;}.header {width: 100%;height: 100px;background: gray;text-align: center;font-size: 20px;line-height: 100px;position: fixed;left: 0;right: 0;top: 0;}.content {width: 100%;height: 1500px;background: blueviolet;text-align: center;font-size: 20px;padding-top: 100px;}.footer {width: 100%;height: 100px;background: grey;text-align: center;font-size: 20px;line-height: 100px;}.toTop {width: 70px;height: 70px;border-radius: 50%;background: greenyellow;text-align: center;line-height: 70px;/*返回顶部标签固定定位*/position: fixed;right: 35px;bottom: 35px;z-index: 999;font-size: 14px;}.toTop:hover {background: green;font-size: 16px;cursor: pointer;color: red;}</style></head><body><div class="wrapper"><div class="header">顶部导航栏部分</div><div class="content"><p>div.wrapper>(div.header+div.content+div.footer+div.toTop)快速生成代码</p><p>content部分的高度大于屏幕的高度，仅仅是为了出现滚动条而已。</p></div><div class="footer">底部</div><div class="toTop">回顶部</div></div></body></html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function() {// 初始时，“返回顶部”标签隐藏$(".toTop").hide();$(window).scroll(function() {// 若滚动的高度，超出指定的高度后，“返回顶部”的标签出现。if($(document).scrollTop() >= 150) {$(".toTop").show();} else {$(".toTop").hide();}})// 绑定点击事件，实现返回顶部的效果$(".toTop").click(function() {$(document).scrollTop(0);})})
</script>

3.效果展示

一下分别为：滚动前、滚动后、点击“返回顶部”后的效果对比

“返回顶部”的简易代码及设计理念相关推荐

jquery实现：返回顶部（动画·代码精简版）- 代码篇
jquery实现:返回顶部(动画·代码精简版):animate 使用css3的animate属性,一行代码就能实现功能. 动画演示(省略) 代码如下:(精简) <script type=&quo ...
返回顶部：js代码篇
代码篇: 地址:jQuery scroll()方法:页面滚动到一定位置触发事件返回顶部我们监听滚动事件,放滚动到 400px 时,出发显示返回顶部标签,然后给该标签,绑定一个事件,点击返回顶部. H ...
返回顶部浮动图标代码
代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可.另外你可能还需要和我一样盗用人人网的返回顶部图片一张. <div style="display:none; ...
html js 回到顶部,简单的返回顶部的js代码
返回顶部js代码 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
html浮动图标代码,返回顶部浮动图标代码
博主,您好,您的这个教程的方法很好,也很美观.但是我有些问题想请教您,谢谢了.我按照您的方法添加代码到源文件里的时候并没有生效.不知道是不是我方法不对. 我的是WordPress驱动, 我将以下代码添 ...
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
简单返回顶部代码及注释说明（转）
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...
b站pink老师JavaScript的PC端网页特效案例代码——仿淘宝返回顶部(带有动画的返回顶部)
目标效果: 在之前写好的的代码基础上实现点击返回顶部字样,即可用缓动动画返回顶部[见代码段中4.和动画函数部分] 重点语法: 滚动窗口至文档中的特定位置 window.scroll(x,y) x, ...

“返回顶部”的简易代码及设计理念

“返回顶部”的简易代码及设计理念相关推荐

最新文章

热门文章