用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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
中止javascript执行的方法
Feb 14 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 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生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
python之文件读取一行一行的方法
2018/07/12 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
晚归检讨书
2014/02/19 职场文书
英语系本科生求职信
2014/07/15 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
求职自我评价怎么写
2015/03/09 职场文书
化妆品促销活动总结
2015/05/07 职场文书
教师继续教育反思周记
2015/06/25 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书