用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 相关文章推荐
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
Javascript的比较汇总
Jul 25 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
react以create-react-app为基础创建项目
Mar 14 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
咖啡与牛奶
2021/03/03 冲泡冲煮
用Flash图形化数据(一)
2006/10/09 PHP
php读取msn上的用户信息类
2008/12/05 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
django中的ajax组件教程详解
2018/10/18 PHP
js 单引号 传递方法
2009/06/22 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python实现键盘输入的实操方法
2019/07/16 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
房屋出租协议书
2014/04/10 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
爱国电影观后感
2015/06/19 职场文书
MySQL数据库 任意ip连接方法
2022/05/20 MySQL