<!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. Win8 Metro(C#)数字图像处理--2.40二值图像轮廓提取算法

    原文:Win8 Metro(C#)数字图像处理--2.40二值图像轮廓提取算法  [函数名称]   二值图像轮廓提取         ContourExtraction(WriteableBitm ...

  2. java设计模式（2）

    工厂模式定义 在面向对象程序设计中,工厂通常是用来创建其他对象的对象,工产模式根据不同的参数来实现不同的分配方案和创建对象. 在工产模式中,我们创建对象时不会对客户端暴露创建逻辑,而且是通过使用一个共 ...

  3. UWP项目生成错误: 未能使用“CompileXaml”任务的输入参数初始化该任务。“CompileXaml”任务不支持“PlatformXmlDir”参数。请确认该参数存在于此任务中，并且是可设置的公共实例属性。

    UWP项目生成错误: 未能使用“CompileXaml”任务的输入参数初始化该任务.“CompileXaml”任务不支持“PlatformXmlDir”参数.请确认该参数存在于此任务中,并且是可设置的 ...

  4. 零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」

    原文:零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」 本章将介绍UseLayoutRounding ...

  5. 使用Boost的DLL库管理动态链接库（类似于Qt中的QLibrary）

    Boost 1.61新增了一个DLL库,跟Qt中的QLibrary类似,提供了跨平台的动态库链接库加载.调用等功能.http://www.boost.org/users/history/version ...

  6. QT5.8 VS2017 编译教程（可以使用VS2017 XP兼容包）

    1.下载QT5.8源码 这个我不做过多解释. 2.安装使用的环境 visual studio 2017  Python Perl  Ruby 安装好,并配置好环境PATH变量. 3.修改错误代码 错误 ...

  7. Globalize 1.0 发布，jQuery 的国际化插件

    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...

  8. IntelliJ IDEA热部署

    如何对webAPP实施热部署:     首先修改Configurations里面的       其次在设置中修改     使用debug模式运行即可

  9. Z Order（Copy From WIN32.HLP）

    The Z order of a window indicates the window's position in a stack of overlapping windows. This wind ...

  10. 基于SAP HANA平台的多团队产品研发

    工欲善其事必先利其器.要提高多团队的开发效率,而且还是在SAP HANA平台上,建议大家还是本着“慢就是快”的原则,不要急功近利,在没有准备好团队开发的架构时就匆忙开始功能的开发.匆忙功能开发就算了, ...