码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-03-06 21:46:16      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:nav   如何   bind   navigator   his   window   att   def   set   

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

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

标签:nav   如何   bind   navigator   his   window   att   def   set   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!