如何实现“返回顶部”的页面效果
2014-10-10 13:33
441 查看
在很多网站中,如果滚动到页面下方,会在右下角一个固定位置出现“返回顶部”的按钮,点一下浏览器滚动条就自动回到顶部了,今天研究了一下,实现的效果如图:
![](http://www.liaoxuefeng.com/files/attachments/00138485029035226f3ad5a98cd44bab659862fce3c47a1000/0)
首先必须感谢知乎,因为这个按钮的样式就是照抄他们的,纯CSS实现,无图片,我只改了颜色。
关于如何用CSS画三角形,参考纯CSS气泡效果一文。
首先,在body中添加“返回顶部”按钮:
重点是go-top的CSS定义:
使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。
按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用jQuery实现,代码相当简单:
当按下按钮时,有动画效果返回顶部。
jQuery实在是太强大了,以至于如果你还不会jQuery那你永远都不可能成为一个真正的前端工程师!
首先必须感谢知乎,因为这个按钮的样式就是照抄他们的,纯CSS实现,无图片,我只改了颜色。
关于如何用CSS画三角形,参考纯CSS气泡效果一文。
首先,在body中添加“返回顶部”按钮:
<body> <div class="go-top"> <div class="arrow"></div> <div class="stick"></div> </div> ... </body>
重点是go-top的CSS定义:
div.go-top { display: none; opacity: 0.6; z-index: 999999; position: fixed; bottom: 113px; left: 90%; margin-left: 40px; border: 1px solid #a38a54; width: 38px; height: 38px; background-color: #eddec2; border-radius: 3px; cursor: pointer; } div.go-top:hover { opacity: 1; filter: alpha(opacity=100); } div.go-top div.arrow { position: absolute; left: 10px; top: -1px; width: 0; height: 0; border: 9px solid transparent; border-bottom-color: #cc3333; } div.go-top div.stick { position: absolute; left: 15px; top: 15px; width: 8px; height: 14px; display: block; background-color: #cc3333; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; }
使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。
按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用jQuery实现,代码相当简单:
$(function() { $(window).scroll(function() { if ($(window).scrollTop() > 1000) $('div.go-top').show(); else $('div.go-top').hide(); }); $('div.go-top').click(function() { $('html, body').animate({scrollTop: 0}, 1000); }); });
当按下按钮时,有动画效果返回顶部。
jQuery实在是太强大了,以至于如果你还不会jQuery那你永远都不可能成为一个真正的前端工程师!
相关文章推荐
- 如何实现“返回顶部”的页面效果
- JS实现效果-点击按钮返回到页面顶部
- 如何通过HTML标记或JS代码实现跳转返回页面顶部
- JS中如何实现点击a标签返回页面顶部的问题
- 如何通过HTML标记或JS代码实现跳转返回页面顶部
- HTML页面实现返回顶部效果 go to top
- Oracle OAF 问题集锦 - 页面‘返回至’/‘Return to’的效果如何实现?
- jquery实现页面常用的返回顶部效果
- 如何通过html标记或js代码实现跳转返回页面顶部
- 如何通过HTML标记或JS代码实现跳转返回页面顶部
- 如何通过HTML标记或JS代码实现跳转返回页面顶部
- 用jQuery实现返回顶部跳转效果
- 如何实现页面顶部flash播放完自动关闭
- PHP中如何实现 “在页面中一边执行一边输出” 的效果
- 常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
- 用jQuery实现返回页面顶部的功能
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- [转载] jQuery实现一个动画版返回顶部和底部的效果
- 如何在Joomla!管理后台中实现标签页面的效果(tabs.js) 【转】