A-A+

jQuery 实现 Scroll to Top 返回页面顶部

2014年11月26日 交互设计 评论 3 条 阅读 1,492 次

返回顶部(Scroll to top)按钮,几乎在所有网站都会看到这个很人性化的功能,适合于内容较多的页面,大多数WordPress主题中都有这个功能,没有没关系,分享一个免插件基于 jQuery 实现返回页面顶部(Scroll to Top) 。

ScrolltoTop

推荐Scroll to Top这个网站,有很多非常个性的返回顶部的小按钮,将他提供的代码加到WordPress主题文件下的footer.php文件中就可以了。如下面一个返回顶部的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow66.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>

不过问题又来了,谷歌被墙后,http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 访问又是问题,因此建议将此链接替换为百度的云服务 http://libs.baidu.com/jquery/2.0.0/jquery.min.js

如果你觉得这些小按钮不好看,你都可以随意替换,只需将Scroll to Top这个网站里的js文件下载下来将其里面图片的路径替换成你想要的图片的路径,然后在footer.php文件里调用这个js文件路径即可。

隐藏代码

  1. var scrolltotop = {
  2.     setting: {
  3.         startline: 100,
  4.         scrollto: 0,
  5.         scrollduration: 1000,
  6.         fadeduration: [500, 100]
  7.     },
  8.     controlHTML: '<img src="图片路径" />',
  9.     controlattrs: {
  10.         offsetx: 10,
  11.         offsety: 2
  12.     },
  13.     anchorkeyword: '#top',
  14.     state: {
  15.         isvisible: false,
  16.         shouldvisible: false
  17.     },
  18.     scrollup: function() {
  19.         if (!this.cssfixedsupport)
  20.             this.$control.css({
  21.                 opacity: 0
  22.             })
  23.         var dest = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto)
  24.         if (typeof dest == "string" && jQuery('#' + dest).length == 1)
  25.             dest = jQuery('#' + dest).offset().top
  26.         else dest = 0
  27.         this.$body.animate({
  28.             scrollTop: dest
  29.         }, this.setting.scrollduration);
  30.     },
  31.     keepfixed: function() {
  32.         var $window = jQuery(window)
  33.         var controlx = $window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
  34.         var controly = $window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
  35.         this.$control.css({
  36.             left: controlx + 'px',
  37.             top: controly + 'px'
  38.         })
  39.     },
  40.     togglecontrol: function() {
  41.         var scrolltop = jQuery(window).scrollTop()
  42.         if (!this.cssfixedsupport) this.keepfixed()
  43.         this.state.shouldvisible = (scrolltop >= this.setting.startline) ? true : false
  44.         if (this.state.shouldvisible && !this.state.isvisible) {
  45.             this.$control.stop().animate({
  46.                 opacity: 1
  47.             }, this.setting.fadeduration[0])
  48.             this.state.isvisible = true
  49.         } else if (this.state.shouldvisible == false && this.state.isvisible) {
  50.             this.$control.stop().animate({
  51.                 opacity: 0
  52.             }, this.setting.fadeduration[1])
  53.             this.state.isvisible = false
  54.         }
  55.     },
  56.     init: function() {
  57.         jQuery(document).ready(function($) {
  58.             var mainobj = scrolltotop
  59.             var iebrws = document.all
  60.             mainobj.cssfixedsupport = !iebrws || iebrws && document.compatMode == "CSS1Compat" && window.XMLHttpRequest
  61.             mainobj.$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body')
  62.             mainobj.$control = $('<div id="topcontrol">' + mainobj.controlHTML + '</div>').css({
  63.                 position: mainobj.cssfixedsupport ? 'fixed' : 'absolute',
  64.                 bottom: mainobj.controlattrs.offsety,
  65.                 right: mainobj.controlattrs.offsetx,
  66.                 opacity: 0,
  67.                 cursor: 'pointer'
  68.             }).attr({
  69.                 title: 'Scroll to Top'
  70.             }).click(function() {
  71.                 mainobj.scrollup();
  72.                 return false
  73.             }).appendTo('body')
  74.             if (document.all && !window.XMLHttpRequest && mainobj.$control.text() != '')
  75.                 mainobj.$control.css({
  76.                     width: mainobj.$control.width()
  77.                 })
  78.             mainobj.togglecontrol()
  79.             $('a[href="' + mainobj.anchorkeyword + '"]').click(function() {
  80.                 mainobj.scrollup()
  81.                 return false
  82.             })
  83.             $(window).bind('scroll resize', function(e) {
  84.                 mainobj.togglecontrol()
  85.             })
  86.         })
  87.     }
  88. }
  89. scrolltotop.init()

3 条留言  访客:3 条  博主:0 条

  1. 大路

    纯粹进来看看,哈哈

  2. 坏猫

    啥玩意都被墙很坑爹啊,互联网本是一个和世界分享的地方,结果我们大多人都躲在墙后面。。。

  3. 酷特尔

    表示使用的最简单的javascript回到顶部。博主有空将我站友情链接修改下,谢谢。

给我留言