jQuery 脚本:
- <script type="text/javascript">
- $(function() {
- var scrollDiv = document.createElement('div');
- $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');
- $(Windows).scroll(function() {
- if ($(this).scrollTop() != 0) {
- $('#toTop').fadeIn();
- } else {
- $('#toTop').fadeOut();
- }
- });
- $('#toTop').click(function() {
- $('body,html').animate({
- scrollTop: 0
- },
- 800);
- })
- });
- </script>
CSS 样式:
- <style type="text/css">
- #toTop
- {
- width: 100px;
- z-index: 10;
- border: 1px solid #333;
- background: #121212;
- text-align: center;
- padding: 5px;
- position: fixed;
- bottom: 0px;
- right: 0px;
- cursor: pointer;
- display: none;
- color: #fff;
- text-transform: lowercase;
- font-size: 0.9em;
- }
- </style>
带有 iframe 框架的滚动操作:
- <script type="text/javascript">
- <!--
- $().ready(function() {
- $('<div id="return_old_tips"class="btn_return_old"style="position:'+ ($.browser.msie ?"absolute":"fixed") +';"onclick="return_old({$feedback_flag},\'{$current_url}\')"> 返回旧版 </div>').appendTo($("body"));
- if ($.browser.msie) {
- $("#return_old_tips").css("top", 200);
- }
- if ($.browser.msie) {
- top.document.body.onscroll = function() {
- var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
- if (f> parseInt($("body").height(), 10)) {
- f = parseInt($("body").height(), 10);
- }
- $("#return_old_tips").css({
- top: f,
- left: 0
- });
- }
- top.document.body.onresize = top.document.body.onscroll;
- } else {
- $(window.parent.document).scroll(function() {
- var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
- if (f> parseInt($("body").height(), 10)) {
- f = parseInt($("body").height(), 10);
- }
- $("#return_old_tips").css({
- top: f,
- left: 0
- });
- }).resize(function() {
- var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
- if (f> parseInt($("body").height(), 10)) {
- f = parseInt($("body").height(), 10);
- }
- $("#return_old_tips").css({
- top: f,
- left: 0
- });
- });
- }
- });
- //-->
- </script>
来源: http://www.jianshu.com/p/a0345ac708c2