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. nginx+vue实现项目动静分离

    一般的企业都会采用前后端分离的方式来开发.部署项目,这样做的好处是更好的让前后台各司其职.另外也由于nginx是一个轻量级的静态资源服务器,其高并发也是其优点之一.这样可以减轻双方服务器的压力,同时又 ...

  2. mongodb数据库分片实现链接

    http://www.lanceyan.com/tech/arch/mongodb_shard1.html

  3. Java EE学习笔记(二)

    Spring中的Bean 1.Bean的配置: a).Bean的本质就是Java中的类,而Spring中的Bean其实就是对实体类的引用,来生产Java类对象,从而实现生产和管理Bean . b).S ...

  4. 115 Distinct Subsequences 不同子序列

    给定一个字符串 S 和一个字符串 T,求 S 的不同的子序列中 T 出现的个数.一个字符串的一个子序列是指:通过删除一些(也可以不删除)字符且不干扰剩余字符相对位置所组成的新字符串.(譬如," ...

  5. MODBUS移植的参考文章

    https://github.com/armink/FreeModbus_Slave-Master-RTT-STM32 http://www.360doc.com/content/14/0906/09 ...

  6. C. Divide by Three DP

    http://codeforces.com/contest/792/problem/C 这题奇葩题我居然用dp过了. 如果要模拟的话,可以用一个栈保存,保存每一个%3 = 2的pos,%3 = 1的p ...

  7. appcloud 加载第三方页面loading效果

    apiready = function() { var header = $api.byId('header'); $api.fixIos7Bar(header); var headerPos = $ ...

  8. na 残

    题目描述: 对于斐波那锲数列f(0)=0,f(1)=1,....求f(f(n)的值 0<=n<=10^100 给出T组数据,每行一个n 输出n行 f(f(n)) 样例输入: 4 0 1 2 ...

  9. CF1080D Olya and magical square

    思路: 构造. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ll sum[]; int ...

  10. Linux自带-系统级性能分析工具 — Perf(转)

    https://blog.csdn.net/zhangskd/article/details/37902159/