首页 > 其他 > 详细

如何利用锚点进行平滑滚动?

时间:2018-03-06 21:22:38      阅读:231      评论:0      收藏:0      [点我收藏+]

1.首先封装了一个插件:

(function($) {
var Anywhere = {
DEF_DURATION: 1000,
ATTR_DURATION: "duration",
ATTR_ANYTYPE: "anytype",
$body_html: $("body, html"),
$window: $(window)
};
$.fn.extend({
toAnywhere: function(duration) {
return $(this).each(function() {
new _anyWhere(this, duration).getAnyWhere();
});
}
});

function _anyWhere(el, duration) {
    this.el = el;
    this.$el = $(el);
    this.duration = parseInt(duration) || Anywhere.DEF_DURATION;
    this.anyType = this.$el.attr(Anywhere.ATTR_ANYTYPE);
}
_anyWhere.prototype = {
    build: function() {
        if(!/MSIE 6/.test(navigator.userAgent)) {
            this.$el.css("position", "fixed");
        }
        this.$el.css("display", "none");
    },
    getAnyWhere: function() {
        if(this.anyType != "link") {
            this.build();
            this.bindWindowScroll();
        }
        this.bindClick();
    },
    bindClick: function() {
        var duration = this.duration;
        this.$el.click(function() {
            var $this = $(this);
            Anywhere.$body_html.animate({
                scrollTop: $($this.attr("href")).offset().top + "px"
            }, parseInt($this.attr("duration")) || duration);
            return false;
        });
    },
    bindWindowScroll: function() {
        var $this = this.$el;
        Anywhere.$window.bind("scroll", function() {
            $(this).scrollTop() > 50 ? $this.fadeIn("fast") : $this.hide();
        });
    }
}

})(jQuery);

只需要调用就行了$(".to_any_link").toAnywhere(500);

如何利用锚点进行平滑滚动?

原文:https://www.cnblogs.com/panax/p/8516351.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!