用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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
vue--vuex详解
Apr 15 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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之COOKIE支持详解
2010/09/20 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
大学四年个人自我小结
2014/03/05 职场文书
校园标语大全
2014/06/19 职场文书
工作目标责任书
2014/07/23 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
酒桌上的开场白
2015/06/01 职场文书
常住证明范本
2015/06/23 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书