• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

jQuery：即插即用 返回顶部 _js/jQuery

当前位置：网站建设 > 技术支持

相关： 《案例：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();

};

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。