<!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. Android零基础入门第65节：RecyclerView分割线开发技巧

    在上一期通过简单学习,已经领略到了RecyclerView的灵活性,当然都是一些最基础的用法,那么本期一起来学习RecyclerView的分割线使用. 相信有的比较细心的同学已经发现了,使用Recyc ...

  2. 通过异步程序调用(APC)实现的定时功能

    定时器是一个在特定时间或者规则间隔被激发的内核对象.结合定时器的异步程序调用可以允许回调函数在任何定时器被激发的时候执行.本文的例子代码显示了如何实现. 使用本定时器时,你需要把常量_WIN32_WI ...

  3. Git基本用法（一）

    使用Git正常的工作流 创建/修改文件 使用git add <file1> <file2> <file3>...将文件添加至本地的缓冲区Index中 使用git c ...

  4. QT中Dialog的使用（使用QStackedWidget维护页面切换）

    先看看效果图: pages.h #ifndef PAGES_H #define PAGES_H #include <QWidget> class ConfigurationPage : p ...

  5. Qt4.8.6详细安装步骤（使用了i686-4.8.2-release-posix-dwarf-rt_v3-rev3，手动设置gcc和gdb）非常清楚 good

    摘要 在网上查看了很多篇关于Qt 4的安装方法,都是以前很久的帖子,所以就想按自己的方式重新总结一下,希望可以帮助到大家. Qt5的安装比较简单只需要下载一个文件qt-opensource-windo ...

  6. C# 对字段忽略模型校验

    1.在if (!ModelState.IsValid)之前给字段赋值,然后TryUpdateModel()2.使用如下方法 public ActionResult Create([Bind(Exclu ...

  7. Google C++测试框架系列高级篇：第一章 更多关于断言的知识

    原始链接:More Assertions 词汇表 现在你应该已经读完了入门篇并且会使用GTest来写测试.是时候来学一些新把戏了.这篇文档将教会你更多知识:用断言构造复杂的失败信息,传递致命失败,重用 ...

  8. 条款10：令operator= 返回一个reference to *this

    关于赋值,可以写成连锁形式: int x, y, z; x = y = z = 15; //赋值连锁形式 赋值采用右结合律,故上述赋值被解析为: x = (y = (z = 15)); 为了实现连锁赋 ...

  9. python列表和字典的迭代

    1.列表和字典的迭代 程序开发中,对列表和字典进行迭代是非常常见的事情. 字典一般可以选择对key进行迭代.对value迭代和对key/value一起迭代 >>> d = {'a': ...

  10. 3016C语言_函数

    第六章 函数 6.1 函数概述 定义 函数:是具有一定功能的一个程序块:是C语言的基本组成单位. 在前面各章的例子及读者自己编写的C语言程序中都用到了以“main“开头的主函数,并且在程序中频繁地调用 ...