<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. 在 XML 中有 5 个预定义的实体引用

  2. C++ 指针形参和指针引用形参的原理分析

    C++ 函数的参数传递可以分为:值传递和引用传递. 两者的最大区别也很简单,如果该函数的参数只是读的话,值传递就可以满足.如果该函数的参数需要进行修改并返回的时候,就应该进行引用传递. C++指针作为 ...

  3. Go:方法

    一.基本介绍 在某些情况下,我们需要定义方法.比如 Person 结构体,除了有一些字段外(姓名.年龄...),还可以有一些行为动作(吃.唱歌...),这就需要用方法才能实现. Go中的方法是作用在指 ...

  4. 运维笔记:zabbix的运用(1)安装过程

    前言 如果是用了阿里云或者腾讯云,他们都有各种监控帮我们做好.但是如果是遇到了自己维护自己机房的服务器,那么一些可视化或者监控就很有意义了.监控可能有很多种方案,这里就以比较老牌通吃的zabbix来解 ...

  5. c++基础_回文数

    #include <iostream> using namespace std; int main(){ ;i<;i++){ ; int n=i;//暂存该四位数来计算 ,以防改变i ...

  6. vim学习之旅01-文本搜索并高亮显示

    step 1:在linux终端新建一个test.txt文本文档:vim test.txt; 回车后打开编辑器: step 2:进入编辑状态(键盘"i")输入一段文本,退出编辑(键盘 ...

  7. Web页面测试总结(控件类)

    界面测试,最多的就是各种控件的功能测试,只有掌握了其测试要点,了解测试方法,总结各种测试情景,才能熟练测试Web页面. 一.输入框 输入框分为文本输入框,数字输入框.一般使用在填写输入的内容上,比如名 ...

  8. xtu summer individual 6 D - Checkposts

    Checkposts Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Orig ...

  9. Android BottomSheet:List列表或Grid网格展示(3)

     Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...

  10. android开发里跳过的坑——listview不显示

    在蓝牙回调接口public void onLeScan(BluetoothDevice device, int arg1, byte[] arg2)里面调用adpter.notifyDataSetCh ...