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

  • 相关阅读:
    【JS】 Javascript 入门
    【CSS】 CSS的一些应用实例和参考
    【CSS】 CSS 定位
    【泛泛】 不知道怎么分类的豆知识
    【CSS】 CSS基础知识 属性和选择
    【HTML】 HTML基础知识 表单
    【HTML】 HTML基础知识 一些标签
    【Linux】 文本比较工具 diff和cmp
    php -- or 的用法
    php -- 检查是否存在
  • 原文地址:https://www.cnblogs.com/panax/p/8516351.html
Copyright © 2011-2022 走看看