原生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" ...
随机推荐
- 性能测试工具JMeter 基础（五）—— 测试元件： 测试计划
测试计划的定义: 测试计划是测试脚本的容器,定义了要执行什么.怎么执行对测试做总体的设置,且都是从线程组开始执行 在测试计划中可自定义用户变量(User Defined Variables),可通过A ...
- 第06课：GDB 常用命令详解（中）
本课的核心内容: info 和 thread 命令 next.step.util.finish.return 和 jump 命令 info 和 thread 命令 在前面使用 info break 命 ...
- coreos 常见问题
1.如果docker run的时候报如下错误: error creating overlay mount to /var/lib/docker/overlay2/... ... 则需要修改/run/s ...
- JNDI注入基础
JNDI注入基础 一.简介 JNDI(The Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API,命名服务 ...
- 线程调用BeginInvoke
线程异步调用 Thread objThread = new Thread(new ThreadStart(delegate { Dispatch ...
- FastAPI（5）- get 请求 - 查询参数 Query Parameters
什么是查询参数? http://127.0.0.1:8000/get?name=xxx&age=18 http://127.0.0.1:8000/get?age=18&name=xxx ...
- JDBC-2(CRUD)
3.PreparedStatement实现CRUD 3.1 操作和访问数据库 数据库连接被用于向数据库服务器发送命令和SQL语句,接受数据库服务器返回的结果.(一个数据库连接就是也给Socket连接) ...
- Spirit带你了解CSS各个方向的居中方案
水平居中和垂直居中的方案 先看HTML的骨架 后面的代码都是基于这个来写的 <!DOCTYPE html> <html lang="en"> <hea ...
- maven编译打包
sonar扫描java项目,需要使用maven 来到maven项目下第一件事情编译打包,注意代码扫描是在编译之后的:https://blog.csdn.net/qq_34556414/article/ ...
- mac php安装扩展 如 seoole apcu
//下载 --安装 --复制扩展文件到对应目录 wget https://pecl.php.net/get/apcu-5.1.7.tgz tar -zvcf pcu-5.1.7.tgz cd 到解压目 ...