js 返回顶部
<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 返回顶部的更多相关文章
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 原生js返回顶部(匀速、由快到慢)
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- 原生JS返回顶部,带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- js返回顶部小Demo
<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...
- js返回顶部
1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...
- 原生js返回顶部
let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
随机推荐
- Vue+Bootstrap实现购物车程序(3)
效果展示:(说明:使用webpack重构购物车程序,使用vue-cli生成项目脚手架) 文件结构: 代码: (1)将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中 可以看到现在代码清 ...
- MyEclipse2017修改Web Context Root
1,复制一个已经存在的项目,并修改项目名 2,选中项目右键选择properities,打开. 但是这里的web context root无法修改 3,删除web显示properties的所有属性,输入 ...
- 2.10.4 aside元素
aside元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- python note of class
reference: https://www.zhihu.com/question/27699413/answer/267906889 摘要: 我们在描述一个真实对象(物体)时包括两个方面:它可以做什 ...
- iphone X 的适配
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- nginx配置错误页面
有时候页面会遇到404页面找不到错误,或者是500.502这种服务端错误,这时候我们可能希望自己定制返回页面,不希望看到默认的或者是内部的错误页面,可以通过nginx配置来实现. 1 50x错误对于5 ...
- java常见日期格式转换以及日期的获取
package com.test.TestBoot.SingleModel;import java.text.SimpleDateFormat;import java.util.Date;public ...
- db2事务日志已满解决办法
查看事务日志配置(MICRO_11为数据库名称): db2 get db cfg for MICRO_11 运行结果: 日志文件大小(4KB) (LOG ...
- NOR flash and NAND flash
(1)读写的基本单位 应用程序对NOR芯片操作以"字"为基本单位.为了方便对大容量NOR闪存的管理,通常将NOR闪存分成大小为128KB或者64KB的逻辑块,有时候块内还分成扇区. ...
- Ajax的特点
[传统提交方式] 客户端提交请求后,服务器会找到相应的资源进行执行.并将执行结果重新发送给客户端.客户端接收到服务器端的响应会进行重新解释并显示.此时的页面是一个全新的页面. [Ajax提交] 客户端 ...