用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 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 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
第五节 克隆 [5]
2006/10/09 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
js判断节假日实例代码
2017/12/27 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python实时监控logstash日志代码
2020/04/27 Python
python中uuid模块实例浅析
2020/12/29 Python
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
自我评价的正确写法
2013/09/19 职场文书
出国考察邀请函
2014/01/21 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
小学信息技术教学反思
2014/02/10 职场文书
企业2014年度工作总结
2014/12/10 职场文书
领导视察通讯稿
2015/07/18 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL