jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客
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滚动功能[带动画效果] 转载相关推荐
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- JavaScript实现返回顶部按钮
利用滚动事件(scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮,立即跳到最顶部. 代码实现如下 <!DOCTYPE htm ...
- jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
- jq实现页面滑动到一定位置显示返回顶部按钮,点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
- 使用jQuery实现返回顶部
目录 前言 效果图 实现 完整的style和body部分HTML代码 前言 最近要设计一个网页,想实现一个类似于菜鸟教程的返回顶部按钮,但找了很久都没找着合适的实现方法,最后自己结合菜鸟教程的设置和网 ...
- 小程序 WXS响应事件(超出两屏显示返回顶部按钮)
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
- jQuery实现返回顶部
jQuery实现返回顶部(gotop) 最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不 ...
- html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
- js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
最新文章
- Compiling: main.cpp /bin/sh: g++: not found
- 生产环境实用的小脚本
- chrome谷歌浏览器用这种方式清除缓存比较方便了,必须是调试模式才行
- Smobiler实现扫描条码和拍照功能(开发日志八)
- C# 3.X -- the newest features
- python元组的概念_python元组的概念知识点
- springboot profile_SpringBoot简单配置
- 软考高项信息系统项目管理工程师自考500元搞定攻略
- linux编译安装rrdtool,Linux下RRDTool安装方法
- UVa 10082 WERTYU
- FileZilla Server图文安装教程
- xshell linux cmd命令大全,Linux(Xshell)命令大全
- 海盗号推荐 | 十分钟读懂币圈必读书籍:《区块链十年》
- python获取发送到手机的短信,使用python将短信更新发送到手机
- 语料库数据处理个案实例(分词和分句、词频统计、排序)
- Fuchsia Friday:一切皆实体
- 甜品店如何用大数据进行选址要素采集
- hdf5 目录没有serial_hdf5
- 反向迭代器---迭代器适配器
- 小高考三门计算机能报大专吗,美术生小高考的要求吗
热门文章
- JavaScript创建对象–如何在JS中定义对象
- esl8266开发之旅_从ESL老师到越南软件开发人员的旅程
- 渐进式web应用程序_渐进式Web应用程序简介
- JavaScript 利用location对象实现跨页面传参
- 软件体系结构风格之C/S,三层C/S,与BS
- C++设置每屏显示的行数简易办法
- Python培训:Python有哪些函数?你了解几种?
- HTML的标签分为哪几类?各标签语法格式是怎样的?
- 类操作是什么意思?jQuery的类操作教程
- 关于高速光耦6n137的使用总结_光耦使用中的那点事1