最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery实现简单而且很酷的返回顶部效果

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-06 17:53浏览(1505)

当用户浏览很长的页面时,可以通过点击页面右下角的“返回顶部”按钮返回到页面顶部。本文将使用gotoTop.js介绍三种“返回顶部”的效果。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery实现简单而且很酷的返回顶部效果
分类:其它特效 > Ajax 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

首页我们引入jQuery库和gotoTop.js。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="gotoTop.js"></script>

jQuery

“返回顶部”按钮的class是.backToTop。页面中goToTop()调用了两次,一次在加载完成后,另一次在页面滚动或浏览器窗口大小发生变化的时候。

$(function(){ 
    $(".backToTop").goToTop(); 
    $(window).bind('scroll resize',function(){ 
        $(".backToTop").goToTop(); 
    }); 
});

我们可以修改“返回顶部”按钮样式,演示中我们介绍了三款。

  • 第一款:仿新浪微博。演示1
  • 第二款:仿QQ个人中心。演示2
  • 第三款:仿天猫商品页。演示3

标签: 顶部底部返回
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/31.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    11-08 09:24
    阿比盖尔的蝴蝶结
    要是有个收藏功能就好了~没办法,用评论make一下吧
1 2