转载自:老驴的博客

jQuery脚本:

 1 <script type="text/javascript">2$(function() {3             var scrollDiv = document.createElement('div');4             $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');5$(window).scroll(function() {6                 if ($(this).scrollTop() != 0) {7                     $('#toTop').fadeIn();8                 } else{9                     $('#toTop').fadeOut();10}11});12             $('#toTop').click(function() {13                 $('body,html').animate({ scrollTop: 0 }, 800);14})15});16     </script>

CSS样式:

1 <style type="text/css">2#toTop3{4width: 100px;5             z-index: 10;6             border: 1px solid #333;7             background: #121212;8             text-align: center;9padding: 5px;10             position: fixed;11bottom: 0px;12right: 0px;13cursor: pointer;14display: none;15color: #fff;16             text-transform: lowercase;17             font-size: 0.9em;18}19     </style>

带有iframe框架的滚动操作:

1  <script type="text/javascript">2 <!--3$().ready(function() {4             $('<div id="return_old_tips" class="btn_return_old" style="position:' + ($.browser.msie ? "absolute" : "fixed") + ';" οnclick="return_old({$feedback_flag},\'{$current_url}\')">返回旧版</div>').appendTo($("body"));5             if($.browser.msie) {6                 $("#return_old_tips").css("top", 200);7}8             if($.browser.msie) {9                 top.document.body.onscroll =function() {10                     var f = 200 + (top.document.documentElement.scrollTop ||top.document.body.scrollTop);11                     if (f > parseInt($("body").height(), 10)) {12                         f = parseInt($("body").height(), 10);13}14                     $("#return_old_tips").css({15top: f,16                         left: 0
17});18}19                 top.document.body.onresize =top.document.body.onscroll;20             } else{21$(window.parent.document).scroll(function() {22                     var f = 200 + (top.document.documentElement.scrollTop ||top.document.body.scrollTop);23                     if (f > parseInt($("body").height(), 10)) {24                         f = parseInt($("body").height(), 10);25}26                     $("#return_old_tips").css({27top: f,28                         left: 0
29});30}).resize(function() {31                     var f = 200 + (top.document.documentElement.scrollTop ||top.document.body.scrollTop);32                     if (f > parseInt($("body").height(), 10)) {33                         f = parseInt($("body").height(), 10);34}35                     $("#return_old_tips").css({36top: f,37                         left: 0
38});39});40}41});42
43 //-->
44     </script>

转载于:https://www.cnblogs.com/whx1973/archive/2012/07/13/2589889.html

jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载相关推荐

  1. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  2. JavaScript实现返回顶部按钮

    利用滚动事件(scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮,立即跳到最顶部. 代码实现如下 <!DOCTYPE htm ...

  3. jquery 实现返回顶部功能

    1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...

  4. jq实现页面滑动到一定位置显示返回顶部按钮,点击回到页面顶部

    返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...

  5. 使用jQuery实现返回顶部

    目录 前言 效果图 实现 完整的style和body部分HTML代码 前言 最近要设计一个网页,想实现一个类似于菜鸟教程的返回顶部按钮,但找了很久都没找着合适的实现方法,最后自己结合菜鸟教程的设置和网 ...

  6. 小程序 WXS响应事件(超出两屏显示返回顶部按钮)

    小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...

  7. jQuery实现返回顶部

    jQuery实现返回顶部(gotop)         最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不 ...

  8. html5 回到顶部按钮,“返回顶部”按钮效果

    "返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...

  9. js浏览器回到顶部方法_js 返回顶部按钮

    要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...

最新文章

  1. Compiling: main.cpp /bin/sh: g++: not found
  2. 生产环境实用的小脚本
  3. chrome谷歌浏览器用这种方式清除缓存比较方便了,必须是调试模式才行
  4. Smobiler实现扫描条码和拍照功能(开发日志八)
  5. C# 3.X -- the newest features
  6. python元组的概念_python元组的概念知识点
  7. springboot profile_SpringBoot简单配置
  8. 软考高项信息系统项目管理工程师自考500元搞定攻略
  9. linux编译安装rrdtool,Linux下RRDTool安装方法
  10. UVa 10082 WERTYU
  11. FileZilla Server图文安装教程
  12. xshell linux cmd命令大全,Linux(Xshell)命令大全
  13. 海盗号推荐 | 十分钟读懂币圈必读书籍:《区块链十年》
  14. python获取发送到手机的短信,使用python将短信更新发送到手机
  15. 语料库数据处理个案实例(分词和分句、词频统计、排序)
  16. Fuchsia Friday:一切皆实体
  17. 甜品店如何用大数据进行选址要素采集
  18. hdf5 目录没有serial_hdf5
  19. 反向迭代器---迭代器适配器
  20. 小高考三门计算机能报大专吗,美术生小高考的要求吗

热门文章

  1. JavaScript创建对象–如何在JS中定义对象
  2. esl8266开发之旅_从ESL老师到越南软件开发人员的旅程
  3. 渐进式web应用程序_渐进式Web应用程序简介
  4. JavaScript 利用location对象实现跨页面传参
  5. 软件体系结构风格之C/S,三层C/S,与BS
  6. C++设置每屏显示的行数简易办法
  7. Python培训:Python有哪些函数?你了解几种?
  8. HTML的标签分为哪几类?各标签语法格式是怎样的?
  9. 类操作是什么意思?jQuery的类操作教程
  10. 关于高速光耦6n137的使用总结_光耦使用中的那点事1