首页 > 网页特效 > 导航菜单 > 自动根据屏幕高度智能显示“返回顶部”导航按钮的JS代码

自动根据屏幕高度智能显示“返回顶部”导航按钮的JS代码

时间：2010-02-20 来源：5icool.org

当网页很长时，要返回顶部就很麻烦，这时在网页底部设置一个返回顶部的按钮就可以解决这个问题，本代码能智能地根据屏幕高度自动显示（当网页内容刚好一屏时则不显示），能随屏平滑滚动，同时兼容firefox浏览器。

<!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>智能显示网页“返回顶部”导航按钮的JS代码 www.5icool.org</title>
<style type="text/css">

</style></head>
<body>
<div></div>
<script>
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
if(diffY == 0){document.getElementById("full").style.display = "none"}
else{document.getElementById("full").style.display = "block"}
}
suspendcode="<div id=\"full\" style='display:none; width:20px; height:90px; POSITION:absolute; left:50%; top:500px; margin-left:460px;  z-index:100; text-align:center;'><a href='#'><img src='/uploadfile/2010/0220/20100220054217135.gif' border=0 alt="返回顶部"></a></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);
</script>
</body>
</html>

提示:可以对代码修改后再运行。

请把以上代码放入网页最底部。

分享到：

更多...

收藏至我的帐号

本地下载

下载排行榜: 31款简单实用的CSS+JS下拉菜单脚本; 带标题和数字导航的JS焦点幻灯特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 唯美华丽带缩略小图的滑动式JQuery幻灯片特...; 14款很漂亮的jQuery导航菜单插件; 3D立体效果金字塔环形旋转的flash+xml相册代码; 带标题显示的宽屏jQuery焦点幻灯片代码

教程排行榜: 21个可用于网站和博客的免费视频播放器插件; 10个WEB开发者应该收藏的实用工具网站推荐; 20款国外知名的PHP开源免费CMS系统推荐; 10款有利于加速WEB开发的必备CSS开发框架; 国外十五款优秀的免费开源电子商务平台; 新浪SAE新手教程：如何下载和安装DiscuzX2.0？; 微博数据分析：新浪微博企业微博发布时间规...; 12款跨浏览器的网页兼容性测试工具推荐; 国外五款主流的免费网站流量统计工具; 巧用QQ漂流瓶做网站营销推广