迅速返回页面顶部浮动按钮代码...
来源:互联网 发布:网络延时怎么解决 编辑:程序博客网 时间:2024/06/09 18:46
其实有一个非常简单的办法,就是用js脚本一句话就可以搞定:javascript:scrollTo(0,0);
转载:
细心的朋友应已发现,有些页面右边有一个小小的“TOP”浮动标签。
当你浏览某个较长的日志页面时,点击这个“TOP”标签,就能够很快的返回到页面的顶部。这
样,是不是能够给你的Visitor带来一些方便呢?有了它,就不再需要拼命按滚动键返回到顶部了.
本着跟大家共享的精神,在此就把这一源代码放出来,以期和大家共同学习呵呵.
这个代码一共分了两段,要分别插在不同的地方。下面就按步骤来说明罢。
第一步:找一个小图标,此处允许个性化(格式为gif或者jpg为佳,大小随意,但是建议不要超过
50*30),比如我使用的是“Top”图标;如果你也喜欢这个图标,可以鼠标右键点击右侧的那个
TOP标签,另存为到你自己的硬盘上,然后上传到你的博客空间,并引用该图片的网址(把该网址
粘贴到一个记事本上备用,后面会说明);
第二步:在你博客的head区域(<head>和</head>)之间,插入如下两条横线间的代码:
引用内容:
<SCRIPT language=javascript>
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
x = getRef(id);
return (isNS4 ? getRef(id) : getRef(id).style);
}
var scrollerHeight = 88;
var puaseBetweenImages = 3000;
var imageIdx = 0;
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset + 200; // 困率 困摹
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + 200; // 困率 困摹
}
timeoutNextCheck = 500;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
</SCRIPT>
注意, 此处表上颜色的你可能需要按照自己博客的实际页面情况进行修改:
红色部分用于定于标签的位置及其宽度大小,right的意思是距离页面右侧边界为50px的距离;
Width表示该标签占用的宽度约为多少(可以采用你第一步上传的那张图片的宽度);
把top.gif部分替换成你第一步里边获得的那个已经准备好的图片网址即可。
style="right: 35px; VISIBILITY: visible; WIDTH: 45px; POSITION: absolute; TOP: 337px">
border=0></a></DIV>
<SCRIPT language=javascript>
<!--
if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + 50;
divMenu.visibility = "visible";
moveRightEdge();
} else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 50;
divMenu.style.visibility = "visible";
moveRightEdge();
}
//-->
</SCRIPT>
好了,一切按部就班后,现去御览一下你的页面吧!感觉是不是几实用的?
- 迅速返回页面顶部浮动按钮代码...
- js 浮动返回页面顶部
- 返回顶部浮动图标代码
- js 返回页面顶部 代码
- jquery 点击按钮页面返回顶部
- 移动端返回顶部右下角按钮代码
- 网页点击按钮返回顶部代码
- jquery左边浮动到一定位置显示返回顶部代码
- jquery使页面返回到顶部代码
- jQuery顶部浮动代码
- 【web布局】点击按钮返回页面顶部的功能实现
- JS实现效果-点击按钮返回到页面顶部
- jquery实现点击按钮返回到页面顶部
- javascript 返回顶部按钮
- 返回顶部按钮
- 返回到顶部按钮
- 返回顶部按钮
- 返回顶部按钮实现
- SCA 之Tuscany 9 ——helloworld JMS binding
- 十种不能空腹吃的食物
- 关于UITableView中的 TableFooterView的使用介绍
- 自己博客用wooky来做关键字搜索的排名
- 一个利用JMF控制摄像头拍照的程序
- 迅速返回页面顶部浮动按钮代码...
- 滚动条设置
- Objective-C和C++混编
- hdu 2136 Largest prime factor(打表)
- Java垃圾回收调优
- 为解压版tomcat添加windows服务
- I2C 设备总线上最小上升时间规定
- DOM html window.showModalDialog的传值和返回值
- C#编程中的66个好习惯,你有多少个