×

点击返回顶部功能

作者:andy0012018.06.23来源:Web前端之家浏览:14941评论:0
关键词:JQueryJS

点击返回顶部功能,代码很简单,这里就不多废话了,小伙伴们看代码吧。

HTML:       

  1. <!--Go to Top-->
  2. <div id="Fixed">
  3. <a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a>
  4. </div>
  5. <!--Go to Top end-->

CSS: 

  1. .fl{
  2. display:block;
  3. float:left;
  4. width:50px;
  5. height:50px;
  6. text-align:center;
  7. background-color:#eaeaea;
  8. background-image:url(../images/toTop.png);
  9. }
  10. .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}
  11.  
  12. #Fixed {
  13. position: fixed;
  14. _position: absolute;
  15. z-index: 100;
  16. bottom: 70px;
  17. left: 50%;
  18. margin-left: 530px;
  19. _bottom: auto;_top:
  20. expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
  21. width: 50px;
  22. text-indent: -40000px;
  23. background: #fff
  24. }
  25.  
  26. /*置顶 end*/

Js:   

  1. /*置顶功能*/
  2. $(function(){
  3. $(window).bind('scroll', {
  4. fixedOffsetBottom: parseInt($('#Fixed').css('bottom'))
  5. },
  6. function(e) {
  7. var scrollTop = $(window).scrollTop();
  8. var referFooter =$('#footer');
  9. scrollTop > 100 ? $('#goTop').show() : $('#goTop').hide();
  10. if (!/msie 6/i.test(navigator.userAgent)) {
  11. if ($(window).height() - (referFooter.offset().top - $(window).scrollTop()) > e.data.fixedOffsetBottom) {
  12. $('#Fixed').css('bottom', $(window).height() - (referFooter.offset().top - $(window).scrollTop()))
  13. } else {
  14. $('#Fixed').css('bottom', e.data.fixedOffsetBottom)
  15. }
  16. }
  17. });
  18.  
  19. $('#goTop').click(function() {
  20. $('body,html').stop().animate({
  21. 'scrollTop': 0,
  22. 'duration': 100,
  23. 'easing': 'ease-in'
  24. })
  25. });
  26. });
  27. /*置顶功能 end*/

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1485273600642.html

网友评论文明上网理性发言 已有0人参与

发表评论: