用jQuery实现的智能隐藏、滑动效果的返回顶部代码


Posted in Javascript onMarch 18, 2014

 在线DEMO:传送门

HTML代码(放在页面任意位置,并用CSS美化):

<p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p>

JS代码:

<script type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    //首先将#back-to-top隐藏
    $("#back-to-top").hide();
    //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
          $("#back-to-top").fadeIn(1500);
        } else {
          $("#back-to-top").fadeOut(1500);
        }
      });
      //当点击跳转链接后,回到页面顶部位置
      $("#back-to-top").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        1000);
        return false;
      });
    });
  });
</script>

下面再来一个简单点的返回顶部的代码:

效果先看演示:http://demo.3water.com/js/2016/gotop/

完整代码:

<!DOCTYPE html>
<html>
<head>
<title>基于jquery的返回顶部效果</title>
<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery.min.js"></script>
<style type="text/css">
#goTop{position:absolute;display:none;width:50px;height:48px;background:#fff url(//img.jbzj.com/file_images/article/201601/gotop.png) no-repeat 16px 15px;border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer}
#goTop:hover{height:50px;background-position:16px 16px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}
</style>
</head>
<body>
<div style="height:2000px; text-align:center; padding-top:300px">想看到效果就需要拖动滚动条到下面,靠右下角的位置就可以看到</div>
<div id="goTop" class="goTop"></div>
<script type="text/javascript">
	$(window).scroll(function(){
		var sc=$(window).scrollTop();
		var rwidth=$(window).width()+$(document).scrollLeft();
		var rheight=$(window).height()+$(document).scrollTop();
		if(sc>0){
			$("#goTop").css("display","block");
			$("#goTop").css("left",(rwidth-80)+"px");
			$("#goTop").css("top",(rheight-120)+"px");
		}else{
			$("#goTop").css("display","none");
		}
	});
	$("#goTop").click(function(){
		$('body,html').animate({scrollTop:0},300);
	});
</script>
</body>
</html>
Javascript 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
详解javascript高级定时器
Dec 31 Javascript
js微信支付实现代码
Dec 22 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
JS实现简单打字测试
Jun 24 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 #Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 #Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 #Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 #Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 #Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 #Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 #Javascript
You might like
PHP新手上路(七)
2006/10/09 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python ldap实现登录实例代码
2016/09/30 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python 接口返回的json字符串实例
2018/03/27 Python
python3.5绘制随机漫步图
2018/08/27 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
高中生期末评语
2014/01/28 职场文书
我的梦想演讲稿
2014/04/30 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
小学生节约用水倡议书
2019/08/12 职场文书