原生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" ...
随机推荐
- NOIP模拟26「神炎皇·降雷皇·幻魔皇」
T1:神炎皇 又是数学题,气死,根本不会. 首先考虑式子\(a+b=ab\),我们取\(a\)与\(b\)的\(gcd\):\(d\),那么式子就可以改写成: \[(a'+b')*d=a'b' ...
- 从需求去理解 Linux dbus与基于dbus协议的无agent软件管理
What is IPC IPC [Inter-Process Communication] 进程间通信,指至少两个进程或线程间传送数据或信号的一些技术或方法.在Linux/Unix中,提供了许多IPC ...
- 图像处理之Canny边缘检测（一）
一:历史 Canny边缘检测算法是1986年有John F. Canny开发出来一种基于图像梯度计算的边缘 检测算法,同时Canny本人对计算图像边缘提取学科的发展也是做出了很多的贡献.尽 管至今已经 ...
- MySQL实战45讲（21--25）-笔记
21 | 为什么我只改一行的语句,锁这么多? 加锁规则里面:包含了两个"原则".两个"优化"和一个"bug". 原则 1:加锁的基本单位是 ...
- 编写一个应用程序，利用数组或者集合， 求出"HELLO"，“JAVA”，“PROGRAM”，“EXCEPTION”四个字符串的平均长度以及字符出现重复次数最多的字符串。
public class Number { public static void main(String[] args) { String[] arr = { "HELLO", & ...
- Vmware 15 安装 win7 虚拟机 （初学者操作与详解教程）
@ 目录 一.镜像下载 1.什么是镜像 2.常见的系统镜像文件格式 3.下载win7旗舰版镜像 二.VMware Workstation 下载 1.什么是虚拟机 2.VMware 主要功能 3.VMw ...
- php安装imagick扩展
下面/usr/local/php5是php的安装目录 安装imagickcd /usr/local/srcwget http://pecl.php.net/get/imagick-3.0.1.tgz ...
- update修改某个字段的值
---恢复内容开始--- 例:给表名 ecs_article中 content字段 的 /tianyuan 替换成 11 加where条件:UPDATE ecs_article set conten ...
- WireShark高级用法
报文注释 分组注释 尽量使用英文注释 时间显示 显示实际时间 抓包过滤器 按照规则抓取报文 显示过滤器 按照规则显示报文 自动生成过滤条件:做为过滤器应用 着色规则 默认 可自定义着色规则 追踪数据流 ...
- django 对models中上传的文件或图片改名
def user_directory_path(instance,filename): print instance,filename ext = filename.split('.')[-1] pr ...