原生js-返回顶部
html部分：
<body style="height:2000px">
<div id="div1">
返回顶部
</div>
</body>
css部分：
#div1{
position:fixed;
_position:absolute;
right:0;
bottom:0;
width:200px;
height:200px;
background:#f00;
display:none;
}
js部分：
window.onscroll=function(){
if(-[1,]){
var y=window.pageYOffset;
}else{
var y=document.documentElement.scrollTop;
}
var div1=document.getElementById("div1");
if(y>=150){
div1.style.display="block";
}else{
div1.style.display="none";
}
div1.onclick=function(){
window.scrollTo(0,0);
}
}
原生js-返回顶部的更多相关文章
- 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- 原生JS返回顶部，带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- 原生js返回顶部
let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- 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 返回顶部
<script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 在node节点部署kubectl管理k8s集群
感谢!原文链接:https://blog.csdn.net/sinat_35930259/article/details/79994078 kubectl是k8s的客户端程序,也是k8s的命令行工具, ...
- docker入门及常用命令
Docker简介 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布 ...
- LCT 小记
全程 Link-Cut Tree,是解决动态树问题的有力科技 --题记 简单实现 LCT 的形态直观上是一堆 Splay 的合体,每个 Splay 以时间戳为关键字,各个 Splay 通过虚边相连,可 ...
- Identity用户管理入门三（注册用户）
用户注册主要有2个方法,1.密码加密 2.用户注册 3.ASP.NET Core Identity 使用密码策略.锁定和 cookie 配置等设置的默认值. 可以在类中重写这些设置 Startup(官 ...
- 网络前置任务（Pretext task）和下游任务（downstream tasks）
Pretext task 可以理解为是一种为达到特定训练任务而设计的间接任务. 比如,要训练一个网络来对 ImageNet 分类,可以表达为 $f_{\theta}(x): x \rightarrow ...
- 批大小、mini-batch、epoch的含义
每次只选取1个样本,然后根据运行结果调整参数,这就是著名的随机梯度下降(SGD),而且可称为批大小(batch size)为 1 的 SGD. 批大小,就是每次调整参数前所选取的样本(称为mini-b ...
- 深入学习Composer原理（三）
本系列第三篇文章,一起了解下PSR规范中的PSR4和PSR0规范 首先恭喜大家,包括我自己,坚持到了现在.这篇文章之后,Composer的基础原理就清晰明了咯.也就是说,Composer所利用的正是s ...
- Shell系列（39） - dirname
dirname作用 dirname实际工作中常常是跟$0一起使用 用于获取当前运行脚本的绝对路径 这个命令要放在shell脚本中使用,在命令行使用意义不大 [yutao@master01 ~]$ di ...
- windows系统升级python
卸载python最干净的办法 https://blog.csdn.net/ic_zswdbk/article/details/88315779?utm_medium=distribute.pc_rel ...
- requests接口自动化-pytest框架
pytest框架规则 测试文件以test_开头或者以_test结尾 测试类以Test开头,并且不能带有init方法 测试函数以test_开头 断言使用assert pytest框架运行用例 运行单个文 ...