dedecms,织梦,织梦伪静态规则,织梦全站伪静态,织梦手机版伪静态,vultr云服务器,vultr优惠,vultr教程,vultr购买

返回顶部简易代码

织梦教程 baishitou 1209℃

返回顶部简易代码

我们在做网站的时间,经常会遇到返回顶部的效果,鼠标滚动一定高度之后,会出现“返回顶部”的标签。“返回顶部”标签被固定到窗口的指定位置,位置始终不变。当滚动的距离高度小于指定高度后,该“返回顶部”的标签消失。另外,“返回顶部标签”绑定点击事件,通过鼠标点击,实现文档回到顶部的效果。

代码一

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>返回顶部</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.header {
				width: 100%;
				height: 100px;
				background: gray;
				text-align: center;
				font-size: 20px;
				line-height: 100px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
			}
			
			.content {
				width: 100%;
				height: 1500px;
				background: blueviolet;
				text-align: center;
				font-size: 20px;
				padding-top: 100px;
			}
			
			.footer {
				width: 100%;
				height: 100px;
				background: grey;
				text-align: center;
				font-size: 20px;
				line-height: 100px;
			}
			
			.toTop {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				background: greenyellow;
				text-align: center;
				line-height: 70px;
				/*返回顶部标签固定定位*/
				position: fixed;
				right: 35px;
				bottom: 35px;
				z-index: 999;
				font-size: 14px;
			}
			
			.toTop:hover {
				background: green;
				font-size: 16px;
				cursor: pointer;
				color: red;
			}
		</style>
	</head>
 
	<body>
		<div class="wrapper">
			<div class="header">顶部导航栏部分</div>
			<div class="content">
				<p>div.wrapper>(div.header+div.content+div.footer+div.toTop)快速生成代码</p>
				<p>content部分的高度大于屏幕的高度,仅仅是为了出现滚动条而已。</p>
			</div>
			<div class="footer">底部</div>
			<div class="toTop">回顶部</div>
		</div>
	</body>
 
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// 初始时,“返回顶部”标签隐藏
		$(".toTop").hide();
		$(window).scroll(function() {
			// 若滚动的高度,超出指定的高度后,“返回顶部”的标签出现。
			if($(document).scrollTop() >= 150) {
				$(".toTop").show();
			} else {
				$(".toTop").hide();
			}
		})
		// 绑定点击事件,实现返回顶部的效果
		$(".toTop").click(function() {
			$(document).scrollTop(0);
		})
 
	})
</script>

代码二

效果

js文件

(function() {
    var btnId = '__gotop';
    var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;

    function $() {
        return document.getElementById(arguments[0]);
    }

    function getScrollTop() {
        return ('pageYOffset' in window) ? window.pageYOffset
            : document.compatMode === "BackCompat"
            && document.body.scrollTop
            || document.documentElement.scrollTop ;
    }    

    function bindEvent(event, func) {
        if (window.addEventListener) {
            window.addEventListener(event, func, false);
        } else if (window.attachEvent) {
            window.attachEvent('on' + event, func);
        }
    }

    bindEvent('load',
        function() {
            var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';

            if (isIE && isIE < 7) {
                css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';
                var style = document.createStyleSheet();
                style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
            }

            var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';
            var el = document.createElement('DIV');
            el.id = btnId;
            el.style.cssText = css;
            el.innerHTML = html;
            document.body.appendChild(el);

            el.onclick = function() {
                (function() {
                    var top = getScrollTop();
                    if (top > 0) {
                        window.scrollTo(0, top / 1.2)
                        setTimeout(arguments.callee, 10);
                    }
                })();
            };

            el.onmouseover = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #ddd';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
            };

            el.onmouseout = function() {
                $(btnId).firstChild.style.borderBottom = '14px solid #fff';
                $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
            };
        }
    );

    bindEvent('scroll',
        function() {
            var top = getScrollTop(), display = 'none';

            if (top > 0) {
                display = 'block';
            }

            if ($(btnId)) $(btnId).style.display = display;
        });
})();

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>返回顶部按钮</title>
   <meta name="keywords" content=""/>
   <meta name="Description" content=""/>
   
   <script type="text/javascript" src="abc.js"></script>
 </head>
 <body style="height:2000px;">
  </body>
</html>

 

转载请注明:白石头博客 » 返回顶部简易代码

喜欢 (2)or分享 (0)