jQuery:即插即用 返回顶部

老白 2年前 651浏览 0评论

相关: 《案例:jQuery 返回顶部(返回顶部、微信、评论、反馈)

 

撒几乎每一个网站都有返回顶部的需要,在制作zblogPHP模板的时候,我也常用各种返回顶部代码。 有时用的是集成的框架,比如Bootstrap,或者Amaze ~ 妹子 UI,甚至layui,都集成有返回顶部插件,甚至有不同的特效。

但在写非常简单的zblog主题时,不需要乱七八糟的特效,不需要使用框架,就简简单单的手写个模板,这时候非常喜欢用各种即插即用的代码,比如本文介绍的返回顶部:

下面分享出来2个返回顶部代码:

来源:http://www.zhangxinxu.com/wordpress/2017/01/share-a-animation-algorithm-js/

1、返回顶部代码

<p>
<button onclick="backToTop();">点击我返回顶部</button>
</p>

javascript

// requestAnimationFrame的兼容处理

if (!window.requestAnimationFrame) {

    requestAnimationFrame = function(fn) {

        setTimeout(fn, 17);

    }; 

}

// 滚动到顶部缓动实现

// rate表示缓动速率

var backToTop = function (rate) {

    var doc = document.body.scrollTop? document.body : document.documentElement;

    var scrollTop = doc.scrollTop;

    

    var top = function () {

        scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);

        

        if (scrollTop < 1) {

            doc.scrollTop = 0;

            return;

        }

        doc.scrollTop = scrollTop;

        requestAnimationFrame(top);    

    };

    top();

};

 2、返回顶部代码:

HTML代码:

<p><button id="btnEaseout">点击我执行Math.easeout返回顶部</button></p>

javascript

// requestAnimationFrame的兼容处理

if (!window.requestAnimationFrame) {

    requestAnimationFrame = function(fn) {

        setTimeout(fn, 17);

    };	

}

Math.easeout = function (A, B, rate, callback) {

	if (A == B || typeof A != 'number') {

		return;	

	}

	B = B || 0;

	rate = rate || 2;

	

	var step = function () {

        A = A + (B - A) / rate;

        

        if (A < 1) {

            callback(B, true);

            return;

        }

        callback(A, false);

        requestAnimationFrame(step);    

    };

    step();

};

 

发表评论