返回頂部簡易代碼
返回頂部簡易代碼
我們在做網(wǎng)站的時間，經(jīng)常會遇到返回頂部的效果，鼠標滾動一定高度之后，會出現(xiàn)“返回頂部”的標簽。“返回頂部”標簽被固定到窗口的指定位置，位置始終不變。當滾動的距離高度小于指定高度后，該“返回頂部”的標簽消失。另外，“返回頂部標簽”綁定點擊事件，通過鼠標點擊，實現(xiàn)文檔回到頂部的效果。
代碼一
<!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部分的高度大于屏幕的高度，僅僅是為了出現(xiàn)滾動條而已。</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() {
// 若滾動的高度，超出指定的高度后，“返回頂部”的標簽出現(xiàn)。
if($(document).scrollTop() >= 150) {
$(".toTop").show();
} else {
$(".toTop").hide();
}
})
// 綁定點擊事件，實現(xiàn)返回頂部的效果
$(".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>
聲明：
1.本站主要是為了記錄工作、學習中遇到的問題，可能由于本人技術有限，內(nèi)容難免有紕漏，一切內(nèi)容僅供參考。
2.本站部分內(nèi)容來源互聯(lián)網(wǎng),如果有圖片或者內(nèi)容侵犯您的權(quán)益請聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網(wǎng)頁格式，轉(zhuǎn)載時請標注作者與來源。
1.本站主要是為了記錄工作、學習中遇到的問題，可能由于本人技術有限，內(nèi)容難免有紕漏，一切內(nèi)容僅供參考。
2.本站部分內(nèi)容來源互聯(lián)網(wǎng),如果有圖片或者內(nèi)容侵犯您的權(quán)益請聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網(wǎng)頁格式，轉(zhuǎn)載時請標注作者與來源。
THE END
