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

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

posted @ 2018-03-06 19:44  Panax  阅读(710)  评论(0编辑  收藏  举报