js返回顶部的封装

妖狐艹你老母 2022-07-16 01:18 240阅读 0赞

/**
     * Created by raid on 2016/9/25.
     */
    function BackTop(el, opts) {
        this.opts = $.extend({}, BackTop.DEFAULTS, opts);
        this.$el = $(el);
        if (this.opts.mode == 'move') {
            this.$el.on('click', $.proxy(this._move, this));
        } else {
            this.$el.on('click', $.proxy(this._go, this));
        }
        this.$elem = $('html, body');
        this._checkPosition();
        $(window).on('scroll', $.proxy(this._checkPosition, this));
    }
    BackTop.DEFAULTS = {
        mode : 'move',
        pos : $(window).height(),
        dest : 0,
        speed : 800,
    };
    BackTop.prototype._move = function () {
        var opts = this.opts,
            dest = opts.dest;
        if ($(window).scrollTop() != dest && !this.$elem.is(":animated")) {
            this.$elem.animate({
                scrollTop: dest
            }, opts.speed);
        }
    };
    BackTop.prototype._go = function () {
        var dest = this.opts.dest;
        if ($(window).scrollTop() != dest) {
            this.$elem.scrollTop(dest);
        }
    };
    BackTop.prototype._checkPosition = function () {
        var $el = this.$el;
        if ($(window).scrollTop() < this.opts.pos) {
            $el.fadeOut();
        } else {
            $el.fadeIn();
        }
    };
    
    $.fn.extend({
        backtop : function (opts) {
            return this.each(function () {
                new BackTop(this, opts)
            });
        }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生缓慢返回顶部函数封装

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25l

我就是我/ 2023年07月08日 02:49/ 0 赞/ 8 阅读

相关 js制作返回顶部

页面返回顶部有很多漂亮的形式，今天这里分享一个返回顶部的两个小动画。效果一： ![在这里插入图片描述][20200622190305716.gif] 效果而： !

深碍√TFBOYSˉ_/ 2023年02月20日 03:04/ 0 赞/ 2 阅读

相关返回顶部

点击返回顶部，简单易学效果图： ![Center][] 第一步：将返回按钮fixed到具体位置后隐藏第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐

拼搏现实的明天。/ 2022年08月18日 12:23/ 0 赞/ 312 阅读

相关 js返回顶部的封装

/ Created by raid on 2016/9/25. / function BackTop(el, opts) {

妖狐艹你老母/ 2022年07月16日 01:18/ 0 赞/ 241 阅读

相关 JS实现页面返回顶部的匀加速运动

JS实现页面返回顶部的匀加速运动 //返回顶部 //声明返回顶部的函数 function returnTop(){

我会带着你远行/ 2022年07月13日 01:07/ 0 赞/ 202 阅读

相关 Web JS实现页面返回顶部

![右下角“返回顶部“按钮][1240] > > 之前写博客的时候加了个返回顶部的功能 > > 采用js的scrollTop属性实现了一下这个简单的功能当页面特别长的时

超、凢脫俗/ 2022年06月17日 00:54/ 0 赞/ 352 阅读

相关返回顶部效果!

刚刚需要为网页添加一个返回顶部的效果，又懒得自己写，百度了一下找到两个还不错的。这里分享给大家。 <!DOCTYPE html> <html lang="en"> <

妖狐艹你老母/ 2022年06月04日 06:15/ 0 赞/ 324 阅读

相关返回顶部demo

一、html 页面代码如下 <!doctype html> <html lang="en"> <head> <meta charset

Love The Way You Lie/ 2022年01月22日 07:05/ 0 赞/ 313 阅读

相关 js中点击返回顶部

window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0

向右看齐/ 2021年12月21日 04:19/ 0 赞/ 286 阅读

相关原生JS返回顶部，带返回效果

有些网站当滑到一定高度时右下角会有一个按钮，你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难；首先我们先在网页中创建一个按钮，上面写上返回顶部，把它的

秒速五厘米/ 2021年10月01日 02:02/ 0 赞/ 375 阅读