如何利用锚点进行平滑滚动?
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);
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!