博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
滚动到顶部-jquery.scrolltotop.js
阅读量:6909 次
发布时间:2019-06-27

本文共 4498 字,大约阅读时间需要 14 分钟。

  hot3.png

使用教程:

  1. 直接粘贴下面的代码, 作为一个jquery.scrolltotop.js引入
  2. 配置参数:scrolltotop.setting.startline = 100; // 还有controlHTML参数等等可配置
  3. 初始化插件: scrolltotop.init();
//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')//** v1.1 (April 7th, 09')://** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.//** 2) Fixes scroll animation not working in Opera. var scrolltotop = {    setting: {        startline: 1, // 开始出现回到顶部控件的scrollTop值        scrollto: 0,        scrollduration: 80,        fadeduration: [500, 100]    },    controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"    controlattrs: {        offsetx: 100,        offsety: 165    }, //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().show();            this.state.isvisible = true        } else if (this.state.shouldvisible == false && this.state.isvisible) {            this.$control.stop().hide();            this.state.isvisible = false        }    },    offset: function(x, y) {        scrolltotop.controlattrs.offsetx = x;        scrolltotop.controlattrs.offsety = y;    },    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 = $('
' + mainobj.controlHTML + '
') .css({ position: mainobj.cssfixedsupport ? 'fixed' : 'absolute', bottom: mainobj.controlattrs.offsety, right: mainobj.controlattrs.offsetx, display: 'none', cursor: 'pointer' }) .attr({ title: '回到顶部' }) .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() }) }) }};

转载于:https://my.oschina.net/luozt/blog/268850

你可能感兴趣的文章
Python数据结构与算法
查看>>
vim插件ctags的安装和使用
查看>>
C语言面试题汇总之一
查看>>
linux重新设置密码,亲试成功
查看>>
无法创建链接服务器 "xxx" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例。 (Microsoft SQL Server,错误: 7302)...
查看>>
vue去除地址栏上的'#'号
查看>>
[转]Linux下which、whereis、locate、find 命令的区别
查看>>
BZOJ4566:[HAOI2016]找相同字符——题解
查看>>
IIS 5 与IIS 6 原理介绍
查看>>
【总结整理】AMAP学习AMAP.PlaceSearch()
查看>>
c# webbrowser.documentstream保存html文件 解决gb2312编码 存下后出现乱码的问题
查看>>
一个IMAGE BUTTON
查看>>
otter跳过部分binlog,规避找不到binlog的问题
查看>>
CGLib与JDKProxy的区别
查看>>
CSDN博客投票活动开始了
查看>>
Android屏幕元素层次结构
查看>>
是男人就下100层【第五层】——换肤版2048游戏
查看>>
关于AutoResetEvent的使用
查看>>
javascript——DOM之childNodes、nodeType、children、parentNode
查看>>
CLR笔记 三 类型中字段布局
查看>>