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-返回顶部的更多相关文章

  1. 原生js返回顶部（匀速、由快到慢）

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  2. 原生JS返回顶部，带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  3. 原生js返回顶部

    let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...

  4. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  5. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  6. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  7. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  8. js返回顶部

    1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...

  9. js 返回顶部

    <script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...

  10. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. python代码检查工具(静态代码审查)

    python静态代码检查 我们知道python是一门脚本语言,不像C#/Java等编译型语言可以在编译阶段就报出代码错误,脚本语言往往需要在运行期执行到这段代码时才会抛出代码错误. 那么在实际商业项目 ...

  2. WebService学习总结（二）--使用JDK开发WebService

    一.WebService的开发方法 使用java的WebService时可以使用一下两种开发手段 使用jdk开发(1.6及以上版本) 使用CXF框架开发(工作中) 二.使用JDK开发WebServic ...

  3. pycharm 汉化

    1.首先进入pycharm,点击file,找到setting. 2.点击 plugins 搜索Chinese,找到Chinese(simplified)Language Pack EAP,点击inst ...

  4. KMP算法中的几个疑问

    KMP算法next数组求解实现 首先我们通过应用场景将KMP算法中用到的名词做一个说明: 在一个字符串(string1)中查询是否存在另一个字符串(string2). 在字符串匹配算法中,我们通常将字 ...

  5. Weblogic漏洞分析之JNDI注入-CVE-2020-14645

    Weblogic漏洞分析之JNDI注入-CVE-2020-14645 Oracle七月发布的安全更新中,包含了一个Weblogic的反序列化RCE漏洞,编号CVE-2020-14645,CVS评分9. ...

  6. Pikachu靶场通关之XSS（跨站脚本）

    一.XSS(跨站脚本)概述 Cross-Site Scripting 简称为"CSS",为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XSS可以 ...

  7. 基于Typora的Latex代码书写并移植到word中

    如何使用Markdown编译器 编辑Latex公式 并嵌入word内 ​ 前言:对于科研党来讲,在论文中数学公式的展示是必不可少的一环,但是如果不使用公式的格式去敲,那么公式就会过于难看,会大大降低你 ...

  8. use关键字在PHP中的几种用法

    在学习了和使用了这么多年的PHP之后,您知道use这个关键字在PHP中都有哪些用法吗?今天我们就来看一下它的三种常见用法. 1. 用于命名空间的别名引用 // 命名空间 include 'namesp ...

  9. Docker DevOps实战：Docker+Jenkins+Python+Pytest+Allure（1）- 创建Jenkins容器、安装Python环境、安装项目依赖类库、安装Allure报告插件

    前言: 本文实操笔记参照菠萝笔记,安装过程中的坑大家可以参考下 创建Jenkins容器 # 下载Jenkins镜像 [root@localhost ~]# docker pull jenkins/je ...

  10. P4716-[模板]最小树形图

    正题 题目链接:https://www.luogu.com.cn/problem/P4716 题目大意 给出\(n\)个点\(m\)条边的一张有向图,求以\(r\)为根的最小外向树. \(1\leq ...