<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
</head>

<style>
#bot {
position: fixed;
right: 50px;
bottom: 100px;
background: red;
color: #fff;
text-decoration: none;
display: none;
}
</style>

<body>
<script>
</script>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<a href="javascript:;" id="bot" title="返回顶部">返回顶部</a>
</body>
<script type="text/javascript">

var dsq = null;
bot.onclick = function() {
dsq = setInterval(function() {
var gaodu = document.body.scrollTop || document.documentElement.scrollTop;
var sudu = Math.floor(-gaodu / 5);
document.body.scrollTop = document.documentElement.scrollTop = gaodu + sudu;
if(gaodu == 0) {
clearInterval(dsq);
}

}, 30);

}
window.onscroll = function() {
if(document.documentElement.scrollTop + document.body.scrollTop > 0) {
bot.style.display = "block";
} else {
bot.style.display = "none";
}
}
</script>

</html>

WEB前端--返回顶部特效源码的更多相关文章

  1. WEB前端开发学习：源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  2. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  3. Web前端三大框架_vue源码笔记

    一.VUE 1.1 MVVM VUE也是基于MVVM模式实现的.特点就是数据双向绑定 在MVVM模式中,分成三个部分: M 模型 model V 视图 view VM 视图-模型 view-model ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  5. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  6. 多种的android进度条的特效源码

    多种的android进度条的特效源码,这个源码是在源码天堂那个网站上转载过来的,我已经修改一部分了,感觉很实用的,大家可以学习一下吧,我就不上传源码了,大家可以直接到那个网站上下载吧. 源码天堂下载地 ...

  7. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  8. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  9. 【page-monitor 前端自动化 中篇】 源码分析

    转载文章:来源(靠谱崔小拽) 上篇中初探了page-monitor的一些功能和在前端自动化测试方面的可行性,本篇主要分析下page-monitor的实现方式和源码. mode-module简介 pag ...

随机推荐

  1. 关于SetLength报Out of memory的研究及解决办法

    关于SetLength报Out of memory的研究及解决办法 最近在做一个GIS系统, 在读GIS数据时采用了动态数组,突然读一个数据时SetLength报错!Out of memory 仔细研 ...

  2. 解决 ThinkPHP Undefined class constant 'MYSQL_ATTR_INIT_COM

    这是 php.ini 配置所导致: 放开php配置文件中被注释掉的.dll引用即可. extension=php_mysql.dllextension=php_mysqli.dllextension= ...

  3. 使用MinGW编译Boost

    1.下载Boost(http://www.boost.org) 我目前用的是1.61.0版本 2.将MinGW下的bin目录完整路径设置到系统环境变量Path中,保证cmd命令行能找到gcc,g++等 ...

  4. Windows+Idea安装Hadoop开发环境

    前言:这种问题,本来不应该写篇博客的,但是实在是折磨我太久了,现在终于修好了,必须记一下,否则对不起自己的时间,对自己的博客道歉 *** 简介 环境:Windows 10+JDK1.8+Intelli ...

  5. 手机控制PPT good

    以前做了一个小东西,通过手机来控制PPT的翻页,最大化和最小化,东西很简单,近期整理电脑发现了拿来和大家分享一下 主要分为两个部分,客户端和服务器 客户端实现 当初考虑到跨平台的特性就选择了qt来写的 ...

  6. T4生成整理

    将一些公用的东西弄到一个类库DM.T4里面,哪个项目需要用到t4生成的话,将DM.T4的生成事件中将dll和ModelAuto.ttinclude复制到需要使用T4的项目的生成目录下,如果这样 cop ...

  7. UITableViewStyleGrouped 设置表头出现section不为0的问题

    UITableViewStyleGrouped 设置表头出现section不为0的问题 1.如果使用UITableViewStylePlain样式的表格,那么header是会在表格滑动的时候在顶部悬浮 ...

  8. xmanager小技巧

    使用manager时候,左键选中之后,直接右键粘贴,能带来效率的提升.虽然是小技巧,但有人还是不知道,这里简单写一下,供需要的同学参考. 简单二步设置: 1.工具-选项

  9. jmeter报告分析工具

    一直以来做性能测试都是用jmeter和LR,当然还有一些自己写测试脚本,LR不用说,分析结果那个组件杠杠的!但是jmeter毕竟是开源的,所以分析查看结果不像LR那样自带图形神马的,虽然可以自己写脚本 ...

  10. redis的下载及使用

    1.下载 方式一(通过yum) yum install redis -y 方式二(通过源码编译) (1)下载源码包 wget http://download.redis.io/releases/red ...