<!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. Image Caption论文合辑2

    说明: 这个合辑里面的论文不全是Image Caption, 但大多和Image Caption相关, 同时还有一些Workshop论文. Guiding Long-Short Term Memory ...

  2. 聊聊浏览器（webkit）资源加载机制

    一些准备 在开始这个话题之前,我们有必要简单回顾一下 浏览器(webkit)的网页渲染过程(如果想要详细了解这个过程,可以戳我几年前写的一篇文章.): 我们知道,浏览器在渲染过程中,如遇到节点需要依赖 ...

  3. c#获取电脑运行状态（cpu,内存，网络，系统运行时间）

    public class DeviceMonitor { static readonly PerformanceCounter cpuCounter = new PerformanceCounter( ...

  4. Android零基础入门第21节：ToggleButton和Switch使用大全

    原文:Android零基础入门第21节:ToggleButton和Switch使用大全 上期学习了CheckBox和RadioButton,那么本期来学习Button的另外两个子控件ToggleBut ...

  5. AngularJS的简单使用(入门级)

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. AngularJS有着诸多特性,最为 ...

  6. jQuery简明教程

    本文参考w3cshool中文教程,网址:http://www.w3school.com.cn/jquery/index.asp 简介 jQuery是一个Javascript库,使用其的主要目的是简化J ...

  7. 还在羡慕BAT等公司的大流量的架构吗，commonrpc 是一个以netty 传输协议框架为基础（支持FTP）

    还在羡慕BAT等公司的大流量的架构吗?让你的java系统引用解耦,互相独立,commonrpc 就可以办到.commonrpc 是一个以netty 传输协议框架为基础, 自定义 spring shce ...

  8. 为什么说 2017 年你必须要学习 Go 了（多核，网络，多人协作，简单非OO，没有注解，Native，垃圾收集，代码优雅），附两个评论

    为什么要学习Go Go是未来的服务端语言— Tobias Lütke, Shopify.在过去的几年中,Golang逐步流行起来. 还有什么能比一门新语言让码农们疯狂呢? 因此,我开始学习了一段时间G ...

  9. js一道面试题

    题目是这样的,按照以下函数的结果写一个sub()方法: sub(1)(2)(3);/*return 6*/ sub(4)(3)(3);/*return 10*/ 我的山寨做法: function su ...

  10. 不仅仅是百万级TCP长连接框架 t-io

    t-io: 不仅仅是百万级TCP长连接框架 t-io是基于jdk aio实现的易学易用.稳定.性能强悍.将多线程运用到极致.内置功能丰富的即时通讯框架(广义上的即时通讯,并非指im),字母 t 寓意t ...