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

  • 相关阅读:
    文件操作一写操作
    文件操作一读操作
    python基础初识
    while循环和格式化输出
    python基础数据类型一(整数类型和布尔值)
    CentOS 6下安装nodejs 0.9.0(转)
    CentOS安装Python教程
    Discuz! X2.5数据库字典(转)
    SQL 语句中的union操作符
    thinkphp空操作和配置文件实现简化路由
  • 原文地址:https://www.cnblogs.com/panax/p/8516351.html
Copyright © 2011-2022 走看看