jQuery实现返回顶部功能
网络编程 2021-07-04 21:04www.168986.cn编程入门
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。希望大家能够喜欢
代码很简单,这里就不多废话了,小伙伴们看代码吧。
HTML
<!--Go to Top--> <div id="Fixed"> <a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a> </div> <!--Go to Top end-->
CSS
.fl{ display:block; float:left; width:50px; height:50px; text-align:center; background-color:#eaeaea; background-image:url(../images/toTop.png); } .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);} #Fixed { position: fixed; _position: absolute; z-index: 100; bottom: 70px; left: 50%; margin-left: 530px; _bottom: auto;_: expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70); width: 50px; text-indent: -40000px; background: #fff } /置顶 end/
Js
/置顶功能/ $(function(){ $(window).bind('scroll', { fixedOffsetBottom: parseInt($('#Fixed').css('bottom')) }, function(e) { var scrollTop = $(window).scrollTop(); var referFooter =$('#footer'); scrollTop > 100 ? $('#goTop').show() : $('#goTop').hide(); if (!/msie 6/i.test(navigator.userAgent)) { if ($(window).height() - (referFooter.offset(). - $(window).scrollTop()) > e.data.fixedOffsetBottom) { $('#Fixed').css('bottom', $(window).height() - (referFooter.offset(). - $(window).scrollTop())) } else { $('#Fixed').css('bottom', e.data.fixedOffsetBottom) } } }); $('#goTop').click(function() { $('body,html').s().animate({ 'scrollTop': 0, 'duration': 100, 'easing': 'ease-in' }) }); }); /置顶功能 end/
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指