zoukankan      html  css  js  c++  java
  • 如何利用锚点进行平滑滚动?

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

  • 相关阅读:
    洛谷P3275 [SCOI2011]糖果
    2018年12月30&31日
    洛谷P4114 Qtree1
    洛谷P4116 Qtree3
    洛谷P4315 月下“毛景树”
    洛谷P1505 [国家集训队]旅游
    洛谷P2253 好一个一中腰鼓!
    CF616D Longest k-Good Segment
    洛谷P3979 遥远的国度
    洛谷P2486 [SDOI2011]染色
  • 原文地址:https://www.cnblogs.com/panax/p/8516351.html
Copyright © 2011-2022 走看看