用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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
再谈javascript原型继承
Nov 10 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
vue实现树形菜单效果
Mar 19 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 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制作的意见反馈表源码
2007/03/11 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python编程中的反模式实例分析
2014/12/08 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python在线运行代码助手
2016/07/15 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
利用python如何处理nc数据详解
2018/05/23 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
运动会广播稿200米
2014/01/27 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
房屋出租协议书
2014/04/10 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
具结保证书范本
2015/05/11 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server