js控制的回到页面顶端goTop的代码实现

有没有见过很多在页面的右下角有个【回到顶端】的悬浮东东，并且在开始时没有，一移动滚动条就出现，回到了顶端又消失的样子。
像:

控制的js代码如下：


代码如下:

function goTop(){
var _btn = document.getElementById("goTop");
if (document.documentElement && document.documentElement.scrollTop) {
var _con = document.documentElement;
} else if (document.body) {
var _con = document.body;
}
window.onscroll = set;
_btn.style.left = document.documentElement.scrollWidth/2 + 500 + "px";
_btn.onclick = function (){
_btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3);
if (_con.scrollTop == 0) clearInterval(_btn.timer, window.onscroll = set);
},10);
};
function set() {
_btn.style.display = _con.scrollTop ? 'block': "none";
}
};
document.write("<div id=\"goTop\" style=\"font-size:12px; width:20px; height:55px; background:#0950A2; color:#fff; line-height:14px; position:fixed; bottom:30px; display:none; cursor:pointer; text-align:center; padding:5px 0; z-index:1; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode == \'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 30 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 30);\">返<br />回<br />顶<br />部</div>");
window.onscroll = goTop;

赞 (0)

相关推荐

  • 深入理解goto语句的替代实现方式分析

    曾几何时,goto是多么的让牛人绽放他们高超的精湛技术曾几何时,goto又变成了万恶之首曾几何时,goto只在教科书中的示例才会出现有太多的理由不让用goto,但有时,我们又想使用goto的功能,怎么办?用try/catch/finally便可实现同等于goto的功能,来看二个示例: 复制代码 代码如下: try {      // operation one      if (failed) {            throw Exception;      }      // operat

  • php5.3 goto函数介绍和示例

    goto操作符是PHP5.3+后新增功能,用来跳转到程序的另一位置:用法很简单:goto后面带上目标位置的标志,在目标位置上用目标名加冒号标记,如下: 复制代码 代码如下: goto a;echo '我们';a:    echo 'http://www.jb51.net'; 但是goto的目标位置只能同一文件和作用域[既不能跳转到一个函数和类方法中],当然它可以跳出循环,但是不能跳入循环: 复制代码 代码如下: <?phpfor($i = 0; $i < 3; $i++){    echo $

  • C++跳转语句之Goto对变量定义的影响详解

    前言 goto语句也称为无条件转移语句,其基本形式如下 : 语句标号由一个有效地标识符和符号";"组成,其中,标识符的命名规则与变量名称相同,即由字母.数字和下划线组成,且第一个字符必须是字母或下划线.执行goto语句后,程序就会跳转到语句标号处,并执行其后的语句. 通常goto语句与if条件语句连用,但是,goto语句在给程序带来灵活性的同时,也会使得使程序结构层次不清,而且不易读,所以要合理运用该语句. 发现问题 我们经常碰到有在goto后面定义变量,linux下编译不通过的问题(

  • PHP goto语句简介和使用实例

    goto操作符可以用来跳转到程序中的某一指定位置.该目标位置可以用目标名称加上冒号来标记.PHP中的goto有一定限制,只能在同一个文件和作用域中跳转,也就是说你无法跳出一个函数或类方法,也无法跳入到另一个函数.你也无法跳入到任何循环或者switch 结构中.常见的用法是用来跳出循环或者switch,可以代替多层的break. 用法很简单:goto后面带上目标位置的标志,在目标位置上用目标名加冒号标记,如下: 复制代码 代码如下: <?phpgoto a;echo 'Foo';//此句被略过 a

  • Go语言流程控制之goto语句与无限循环

    Go语言流程控制之goto语句与无限循环

    goto语句 在Go编程语言中的goto语句提供无条件跳转从跳转到标记声明的功能. 注意:使用goto语句是高度劝阻的在任何编程语言,因为它使得难以跟踪程序的控制流程,使程序难以理解,难以修改.使用一个goto任何程序可以改写,以便它不需要goto. 语法 转到goto语句的语法如下: 复制代码 代码如下: goto label; .. . label: statement; 在这里,标签(label)可以是除去关键字任何纯文本,它可以在任何地方设置在Go程序的上方或下方,以使用goto语句.

  • cmd批处理 goto call命令使用说明

    第一个批处理 goto命令使用方法将 cmd.exe 定向到批处理程序中带标签的行. GOTO label label   指定批处理程序中用作标签的文字字符串. 标签必须单独一行,并且以冒号打头. 如果命令扩展被启用,GOTO 会如下改变: GOTO 命令现在接受目标标签 :EOF,这个标签将控制转移到当前 批脚本文件的结尾.不定义就退出批脚本文件,这是一个容易的 办法.有关能使该功能有用的 CALL 命令的扩展描述,请键入 CALL /?. 看提示我们需要知道call命令的使用方法从批处理程

  • asp.net中引用同一个项目中的类库 避免goToDefinition时不能到达真正的定义类

    新建一个解决方案: Api 添加类库 APi.Data APi.Data 新建一个 Entity 复制代码 代码如下: public class Entity { private int id; public int Id { get { return id; } set { id = value; } } private string name; public string Name { get { return name; } set { name = value; } } } 添加类库 A

  • dos 流程跳转 goto

    如果对不同的情况,需要执行不同的既定操作,若还是按照常规的执行流程的话,是无法完成任务的,这个时候,就需要引入流程跳转的概念,动用流程跳转语句 goto 了.流程跳转的含义是:改变默认的执行顺序,强制跳转到指定的位置执行特定的程序块. 先来看个例子:假设需要判断用户输入的是A还是B,代码可以写成这样: @echo off set /p input=请输入字母A或B: if "%input%"=="A" goto A if "%input%"==&

  • cmd goto命令 流程跳转

    如果对不同的情况,需要执行不同的既定操作,若还是按照常规的执行流程的话,是无法完成任务的,这个时候,就需要引入流程跳转的概念,动用流程跳转语句 goto 了.流程跳转的含义是:改变默认的执行顺序,强制跳转到指定的位置执行特定的程序块. 先来看个例子:假设需要判断用户输入的是A还是B,代码可以写成这样: 复制代码 代码如下: @echo off set /p input=请输入字母A或B: if "%input%"=="A" goto A if "%inpu

  • 批处理中常用命令介绍(Echo、rem、goto、call、pause、if、for)

    一.echo命令 (echo图文版) 1. Echo :显示当前ECHO的状态:ECHO ON 或者ECHO OFF .2. ECHO ON :ECHO状态设为ON,将显示命令行(如每行前的C:\>等类似标志).3. ECHO OFF:CHO状态设为OFF,将不显示命令行(如每行前的C:\>等类似标志) .4. ECHO 字符串 :将输入的字符串显示在CMD屏幕上.5. ECHO 字符串 &ECHO 字符串 - :&,类似and的意思,逻辑运算,用来显示多行数据.6. ECHO

随机推荐