var getTop = document.getElementById("get-top");
var head = document.getElementById("head");
getTop.onclick = function () {
var time = setInterval(function () {
document.body.scrollTop = document.body.scrollTop - 50;
if (document.body.scrollTop === 0) {
clearInterval(time);
}
}, 1); };
链接:https://segmentfault.com/q/1010000003855799

css3如何实现click后页面过渡滚动到顶部的更多相关文章

  1. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

  2. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  3. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  4. WebForm 回传后如何保持页面的滚动位置

    转载自 http://www.cnblogs.com/renjuwht/archive/2009/06/17/1505000.html 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部.对 ...

  5. input禁止输入后,触发事件,在苹果手机的页面会滚动

    在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. ...

  6. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  7. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  8. h5空白页面过渡加载

    h5空白页面过渡加载 页面第一部分内容是图片,考虑到手机图片加载慢,想用简单.转化为base64的图片过渡 开始尝试将图片转为灰度图片,结果还是很大. 后来选取重要元素,保存2位的png,尺寸是494 ...

  9. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

随机推荐

  1. PostgreSQL - 用psql 运行SQL文件

    对于预先写好的SQL文件,比如/home/user1/updateMyData.sql, 可以有两种方式来运行这个SQL文件. 方式一:连接db后执行SQL文件 首先通过psql连接到对应的db: p ...

  2. C# 基础之类与结构体的区别

    1.语法上的区别是: 定义类使用关键字class,定义结构体用关键字struct 2.结构体中不可对声明字段进行初始化,但类可以 3. 类:如果没有为类显示的定义一个构造函数,c#编译器会自动生成一个 ...

  3. 《http和https协议》

    一.HTTP协议 1.官方概念: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文 ...

  4. ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) D

    Moriarty has trapped n people in n distinct rooms in a hotel. Some rooms are locked, others are unlo ...

  5. Storm编程入门API系列之Storm的Topology默认Workers、默认executors和默认tasks数目

    关于,storm的启动我这里不多说了. 见博客 storm的3节点集群详细启动步骤(非HA和HA)(图文详解) 建立stormDemo项目 Group Id :  zhouls.bigdata Art ...

  6. oracle删除数据库表空间

    步骤一:  删除user drop user ×× cascade 说明: 删除了user,只是删除了该user下的schema objects,是不会删除相应的tablespace的. 步骤二: 删 ...

  7. 《高性能MySQL》读书笔记之创建高性能的索引

    索引是存储引擎用于快速找到记录的一种数据结构.索引优化是对查询性能优化的最有效手段.索引能够轻易将查询性能提高几个数量级.创建一个最优的索引经常需要重写查询.5.1 索引基础 在MySQL中,存储引擎 ...

  8. CSS选择器手册

    CSS选择器手册 选择器       选择器名称         例子 例子描述 CSS E.class 类选择器 E.intro 选择 class="intro" 的所有E元素. ...

  9. 《Python基础教程》 读书笔记 第九章 魔法方法、属性和迭代器(上)

    构造方法 在Python中创建一个构造方法很容易.只要把init方法的名字从简单的init修改为魔法版本__init__即可: >>> class FooBar: ...     d ...

  10. php类重载

    首先,因为PHP是弱类型语言,是不直接支持重载的,不过可以通过一些方法来实现重载. 先说一下重写 在子类继承父类方法后,自己重新定义父类的方法,包含函数名,形参(个数,顺序)完全相同,但权限修饰符可不 ...