Jquery “回到顶部”_$.fn.totop-CSDN博客

本文链接：https://blog.csdn.net/zhulongxi/article/details/51444395

1.html页面：

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/jquery-1.9.1.min.js"></script>
    <script src="scripts/gotoTop.js"></script>
    <style type="text/css">
        .demo {
            height: 1400px;
            padding-top: 100px;
        }

            .demo p {
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-size: 16px;
            }

                .demo p span {
                    margin: 20px;
                }

                .demo p a.cur {
                    color: #f60;
                    font-weight: bold;
                }

        a.backToTop {
            width: 60px;
            height: 60px;
            background: #eaeaea url(top.gif) no-repeat -51px 0;
            text-indent: -999em;
        }

            a.backToTop:hover {
                background-position: -113px 0;
            }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".backToTop").goToTop();
            $(window).bind('scroll resize', function () {
                $(".backToTop").goToTop({
                    pageWidth: 960,
                    duration: 0
                });
            });
        });
    </script>
</head>
<body>
    <div class="demo">
        <div class="ad_demo">

        </div>
    </div>
</body>

2.gotoTop.js文件：

// JavaScript Document
(function($){
	var goToTopTime;
	$.fn.goToTop=function(options){
		var opts = $.extend({},$.fn.goToTop.def,options);
		var $window=$(window);
		$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
		//$(this).hide();
		var $this=$(this);
		clearTimeout(goToTopTime);
		goToTopTime=setTimeout(function(){
			var controlLeft;
			if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {
				controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;
			}else{
				controlLeft = $window.width()- opts.pageWidthJg-$this.width();
			}
			var cssfixedsupport=$.support.msie && parseFloat($.browser.version) < 7;//判断是否ie6
			var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
			controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
			var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;
			
			if (shouldvisible){
				$this.stop().show();
			}else{
				$this.stop().hide();
			}
			
			$this.css({
				position: cssfixedsupport ? 'absolute' : 'fixed',
				top: controlTop,
				left: controlLeft
			});
		},30);
		
		$(this).click(function(event){
			$body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);
			$(this).blur();
			event.preventDefault();
			event.stopPropagation();
		});
	};
	
	$.fn.goToTop.def={
		pageWidth:910,//页面宽度
		pageWidthJg:2,//按钮和页面的间隔距离
		pageHeightJg:100,//按钮和页面底部的间隔距离
		startline:30,//出现回到顶部按钮的滚动条scrollTop距离
		duration:500,//回到顶部的速度时间
		targetObg:"body"//目标位置
	};
})(jQuery);
$(function(){
	$('<a href="javascript:;" class="backToTop" title="返回顶部">返回顶部</a>').appendTo("body");
});