返回顶部按钮的代码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之后显示返回。

原文地址:https://www.cnblogs.com/tangself/p/1820586.html