<script>
window.onload = function(){
var oTop = document.getElementById("to_top");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
oTop.style.left = screenw - oTop.offsetWidth +"px";
oTop.style.top = screenh - oTop.offsetHeight + "px";
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
}
oTop.onclick = function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
} </script>
<div id="to_top">返回顶部</div>

js 返回顶部的更多相关文章

  1. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  2. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  3. 原生js返回顶部(匀速、由快到慢)

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  4. 原生JS返回顶部,带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  5. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  6. js返回顶部

    1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...

  7. 原生js返回顶部

    let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...

  8. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  9. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

随机推荐

  1. vue工程化:返回顶部和底部的动画效果

    . <template> <div> <div class="scroll" :class="{show:isActive}"&g ...

  2. mac 目录颜色设置

    1 export CLICOLOR=1  2 export LSCOLORS=gxfxaxdxcxegedabagacad

  3. ajax 分页点击数据缓存

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. cacheStorage缓存及离线开发

    案例地址:https://zhangxinxu.github.io/https-demo/cache/start.html 我们直接看一个例子吧,如下HTML和JS代码: <h3>一些提示 ...

  5. sublime text 快捷键记录

    sublime常用快捷键 Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) Ctrl+G 跳转到相应的行 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl ...

  6. xphrof性能分析线上部署实践

    说明 将xhprof部署在线上环境,在特定情况下进行性能分析,方便快捷的排查线上性能问题. 通过参数指定及添加代码行触发进入性能分析,并将结果保存入MongoDB. 因为xhprof对性能的影响,只部 ...

  7. npm 发包

    前几天封装了公用的locaStorage组件,当然封装后需要发布npm官网,于是摸索了一番终于搞定了,总结下来希望对大家有所帮助 npm安装的package一般支持下面几大类: 本地包 url远程包 ...

  8. Linux学习总结(22)——CentOS7.2安装Nginx

    一.使用Yum安装(推荐) 使用Yum安装是推荐的方式,整体的流程非常的简单,也不容易出错,如果不需要什么特殊配置,建议使用Yum尽进行安装. 1.安装epel-release源并进行安装 1 2 3 ...

  9. PHP学习笔记<参数的传递>

    简单的例子说明参数在PHP文件之间的传递(有两个PHP文件在index.php文件上点击链接,在跳转的时候,依据参数的不同在neirong.php文件中显示不同的内容) inde.php的内容如下: ...

  10. C++ stringstream的用法

    Created at    stringstream的用法 使用stringstream对象简化类型转换 C++标准库中的<sstream>提供了比ANSI C的<stdio.h&g ...