博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
读《思维的乐趣matrix67数学笔记》
查看>>
linux25-代理服务器
查看>>
前端开源项目周报0314
查看>>
SQL Server中DateTime与DateTime2的区别是什么
查看>>
LogStash日志分析展示系统
查看>>
操作系统CnetOS_7—systemd管理实践指南
查看>>
讯时O口MX8网关对接昆石软交换vos3000
查看>>
cocos2d-x滚屏简单实现
查看>>
屏幕适配
查看>>
svn大仓库拆小仓库迁移保留commit
查看>>
我的友情链接
查看>>
ThinkPHP的where方法的in操作符说明
查看>>
Nginx学习记录-3 配置文件Nginx.conf《Nginx高性能Web服务器详解》笔记
查看>>
keepalived实现高可用配置过程
查看>>
Maven的依赖
查看>>
[tomcat]tomcat8.5线程池
查看>>
linux中 find命令的总结
查看>>
MySQL 5.5 安装方法 详细图解
查看>>
也谈教育公平与户籍改革
查看>>
我的友情链接
查看>>