用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脚本实现Web页面信息交互
Dec 21 Javascript
JavaScript中Math对象使用说明
Jan 16 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
使用JS读秒使用示例
Sep 21 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JS原型链怎么理解
Jun 27 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
详解javascript中的babel到底是什么
Jun 21 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
基于PHP生成简单的验证码
2016/06/01 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
四风自我剖析材料
2014/09/30 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
助学金感谢信
2015/01/20 职场文书
感谢信怎么写
2015/01/21 职场文书
商务考察邀请函模板
2015/02/02 职场文书
医德医风个人总结
2015/02/28 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers