用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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 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
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python实现AES加密与解密
2019/03/28 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
市场营销工作计划书
2014/09/15 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
财务总监岗位职责
2015/02/03 职场文书
培训简讯范文
2015/07/20 职场文书
英镑符号 £
2022/02/17 杂记