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

Posted 2020-10-26 Panax

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);