返回顶部按钮的代码jQuery topLink Plugin

返回顶部按钮的代码

在David的blog里看见个新东西，就是jQuerytopLink Plugin，

原文地址 jQuery topLinkPlugin

 

使用方法：
 

1：在body任意处，最好是单独的位置，别和其他代码混合在一起了。放置：

<a href="#top" id="top-link">Top of Page</a>
2：在CSS文件里放置：(根据你自己的需要修改即可。)

#top-link{
display:none; position:fixed; right:5px; bottom:5px;
text-decoration:none; 
color:green; font-weight:bold; 
border:1px solid green; 
background:Lightgreen; padding:10px;
}
 3：页面任意地方加载JS部分，你需要先下载2个文件jQuery源代码 和 scrollTo  （注意调用路径）

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
下面还需要一段代码：

<script type="text/javascript">
    jQuery.fn.topLink = function(settings) {
        settings = jQuery.extend({
            min: 1,
            fadeSpeed: 200,
            ieOffset: 50
        }, settings);
        return this.each(function() {
            //listen for scroll
            var el = $(this);
            el.css('display','none'); //in case the user forgot
            $(window).scroll(function() {
                if(!jQuery.support.hrefNormalized) {
                    el.css({
                        'position': 'absolute',
                        'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
                    });
                }
                if($(window).scrollTop() >= settings.min)
                {
                    el.fadeIn(settings.fadeSpeed);
                }
                else
                {
                    el.fadeOut(settings.fadeSpeed);
                }
            });
        });
    };
    
    $(document).ready(function() {
        $('#top-link').topLink({ 
            min:800,
            fadeSpeed: 500
        });
        //smoothscroll
        $('#top-link').click(function(e) {
            e.preventDefault();
            $.scrollTo(0,300);
        });
    });
        
</script>
第33行，min:800即为当高度超过800px之后显示返回。