史上最简单的「返回顶部」代码

之前实现返回顶部用的是 jQuery Smooth Scroll 插件, 但是被我发现了一个更简便的用代码就可以解决的办法, 于是就把插件给卸载了.

丝毫不吹牛的说这个绝对是史上最简短的代码了, 因为只需要一行...在 footer.php 中的最后一个 </body> 标签之前加入如下代码:

<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow66.js"></script>

嗯, 没了...就这一行实现返回顶部, 具体效果见页面右下角.

其实看一下代码很容易就发现这个只是调用别人服务器上已有的 Js 代码. 如果把最后的" arrow66.js "换成" arrow62.js ", " arrow63.js "等等都可以, 只是显示不同的返回标志而已.

本着一探究竟的精神我点开这段 Js 代码( 见本文末尾 ), 其实跟普通的 jQuery 上移代码没有本质区别.如果对这个标志不满意的话, 可以在这里找到更多的" 返回顶部 "代码. 其实原代码一般有三行:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow13.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>

第一句应该是先调用一个云端的 jQuery 库, 即使网站本身没有开启 jQuery 也确保下面的代码可以生效. 不过目前绝大部分的网站都是启用了 jQuery, 所以这一句没有什么用处. 而且在我的网站上如果加上这一句会导致网站首页空白, 应该是这个库跟现有主题内置的产生冲突了. 建议先不要加入这一句代码, 如果不能实现返回顶部的话再尝试加入. 第二句就是真正的调用代码了. 第三句应该是一行广告, 给原始网站增添流量罢了, 建议删除.

调用云端的代码一个显而易见的缺点就是, 一旦哪一天别人把代码撤下了, 或者存放代码的域名有变动, 那么这个功能就失效了. 保险起见可以将原始的 Js 文件存放在自己网站的 js 文件夹里, 再去 Footer.php 里声明调用一下这个功能. 原始 Javascript 代码见本文末尾. 不过对于我这种懒人就直接写进这一句代码了, 等哪天不能正常工作的时候再来调整一下. 毕竟这么短的一句代码诱惑实在是太大了...

减少工作量带来的另外一个问题就是, 由于代码不是存放在自己的空间里, 完全无法对其进行修改, 别人写好是怎么样就是怎么样, 顶多在 CSS 中编辑一下样式... 而且配合响应式主题, 在移动设备上的显示有一点点问题, 不过并不影响使用. 看下图.

附: 完整的" 返回顶部 " Javascript 代码

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '***', //引号中填入显示的图片 url, 如 img alt="" src="*.png".
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})},togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false}},init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('
<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()})})}}
scrolltotop.init()


20 Comments

  1. 8o00.com 2014-12-27 Reply

    很好!

  2. aliluosuo 2014-12-25 Reply

    请问移动上不显示应该怎么办?

    • Author
      Captain 2014-12-26 Reply

      我这里移动端没问题啊

  3. a9812263 2014-01-03 Reply

    标题有点误导别人,这个只是加载外部的js文件而已,不代表原代码只有一行,也没有所谓“史上最简单”之说。

  4. Era 2013-12-06 Reply

    其实也没有那么简单,只是用别人服务器上的东西而已哈。

  5. 东子 2013-10-06 Reply

    对本文不作评论,想说的是你的下拉条为何那么窄呢,貌似只有1.5cm

    • Author
      Captain 2013-10-08 Reply

      css 里改了一下, 滚动条纯粹是浪费屏幕空间啊. 不作评论是什么意思?

  6. WindyLiu 2013-08-03 Reply

    那个在移动设备中是z-index的问题吗?

    • Author
      Captain 2013-08-03 Reply

      应该也不是,我用火狐的三维查看元素看过,如果是z-index的问题应该那个图标一直保持露半边出来, 但实际在移动设备中又是一会儿出来一会儿被盖住.

  7. WindyLiu 2013-08-03 Reply

    问一个事,就是这个js中,能像CSS中一样用url(images/pic.png)调用其他文件夹设的图片而不用绝对地址吗?

  8. WindyLiu 2013-08-03 Reply

    不错,我用的也是搜来的js代码。

  9. Leniy 2013-07-29 Reply

    他这代码怎么这么复杂。在顶部加个标签平移过去简单些

    • Author
      Captain 2013-07-29 Reply

      那就没有jquery滑动的效果了, 咚的一下就上去了

  10. 小蝴蝶 2013-07-29 Reply

    最简单的返回顶部是直接在url末尾加#
    哈哈哈哈哈

    • Author
      Captain 2013-07-29 Reply

      捣乱么, 你这能叫代码?

  11. 子痕 2013-07-28 Reply

    确实简单~
    我的代码是从别的主题上扒来的,好长~

    • Author
      Captain 2013-07-28 Reply

      昨天把代码和图片改存到本地了, 一劳永逸.

  12. 调研报告 2013-07-26 Reply

    这么长的代码还叫简单啊

    • Author
      Captain 2013-07-26 Reply

      我说的简单仅仅指” 实现 “这个功能. 全文第 4 行的代码一句就能实现.
      另外下次回复再用目的性这么明显的 ID 就直接禁了.

Leave a reply

Your email address will not be published.