js 页面增加返回顶部功能

时间:2013-08-14 16:10:01  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:cing="1" style="background:#FB7">  代码如下 复制代码
  正文:下面这代码完全来自于国外一个网站,它提供了几个版本我现在拿了是最新的版本,兼容主流浏览器,有需要的朋友可以简单的参考一下,用法很简单,只要放在你的网页里面就可以了。
 代码如下 复制代码

// ==UserScript==
// @name           Scroll To Top
// @namespace      sunnylost
// @include        http://*
// @include        httphotoshop/ target=_blank class=infotextkey>ps://*
// ==/UserScript==
(function(global) {
 if(global !== window) return;
 
 function bind(context, name) {
  return function() {
   return context[name].apply(context, arguments);
  }
 }
 
 global.addEventListener('scroll', scrollHandler, false);
 
 function scrollHandler() {
  if(!scroll.isScrolling) {
   (scroll.getScrollY() > 0) ? scroll.show() : scroll.hide();
  }
 }
 
 var scroll = {
  _scrollY : 0,
  isScrolling : false,  //is scrolling
  imgBtn : null,
  closeBtn : null,
  create : function() {
   var div = global.document.createElement('div');
   var Css = '#_scrollToTop{position:fixed;display:none;left:90%;top:80%;text-align:center;z-index:999999; width:50px;height:50px;cursor:pointer;opacity:0.5;} #_scrollToTop:hover{opacity:1;} #_scrollToTop a{text-decoration:none;} #_scrollToTop span._arrow{background:none repeat scroll 0 0 #eee;border-style:solid; border-width:1px;border-color:#ccc #ccc #aaa; border-radius:5px;color:#333;font-size:36px;padding:5px 10px;} #_scrollToTop span._close {background:repeat scroll #548b02;position:absolute;top:-15px;right:-15px;border-radius:15px;border:1px solid #ccc;width:15px;height:15px;font-size:12px;text-align:center;visibility:hidden;}';
   GM_addStyle(css);
   
   div.id = '_scrollToTop';
   div.title = 'Back To Top';
   div.innerHTML = '<span class="_close" title="hide this button">×</span><span class="_arrow">▲</span>';
   document.body.appendChild(div);
   div.addEventListener('click', bind(this, 'scrollToTop'),false);
   div.addEventListener('mouSEOver', bind(this, 'mouseOver'),false);
   div.addEventListener('mouseout', bind(this, 'mouseOut'),false);

   return this.imgBtn = div;  
  },
  getImgBtn : function() {
   return this.imgBtn || this.create();
  },
  getCloseBtn : function() {
   return this.closeBtn || (this.closeBtn = this.getImgBtn().getElementsByTagName('span')[0]);
  },
  show : function() {
   this.getImgBtn().style.display = 'block';
  },
  hide : function() {
   this.getImgBtn().style.display = 'none';
  },
  mouseOver : function() {
   this.getCloseBtn().style.visibility = 'visible';
  },
  mouseOut : function() {
   this.getCloseBtn().style.visibility = 'hidden';
  },
  getScrollY : function() {
   //this piece of code is from John Resig's book 'Pro JavaScript Techniques'
   var de = document.documentElement;
   return this._scrollY = (self.pageYOffset ||
    ( de && de.scrollTop ) ||
    document.body.scrollTop);
  },
  scrollToTop : function(e) {
   if(e && e.target && e.target.getAttribute('class') === '_close') {
    //e.preventDefault();
    this.hide();
    global.removeEventListener('scroll', scrollHandler, false);
    return false;
   } else {
    if(!this.isScrolling) {
     this.isScrolling = true;
    }
    this._scrollY -= 150;
    global.scrollTo(0, this._scrollY);
    if(this._scrollY > 0) {
     setTimeout(bind(scroll, 'scrollToTop'), 20);
    } else {
     this.isScrolling = false;
    }
   }
  }
 }
}(window.top))

"js 页面增加返回顶部功能"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/25493.html


关于《js 页面增加返回顶部功能》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td