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. ReScript 与 TypeScript，谁是前端圈的“当红辣子鸡”

    摘要: ReScript 和 TypeScript 的出现都是为了更好地使用JavaScript,但两者还是有很大的不同. 本文分享自华为云社区<[云创共驻]ReScript 和 TypeScr ...

  2. spring boot 系列之八：SpringBoot处理定时任务

    项目经常会用到定时任务,springboot自然是可以通过整合相关组件来实现的. 目前常用的定时任务的实现有两种: 通过spring 自带的定时器任务@Schedule来实现 通过Quartz来实现 ...

  3. 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目

    第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...

  4. Appium自动化（3） - adb无线连接手机的方法

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 除了USB方式连接Andro ...

  5. WEB安全性测试之文件上传漏洞

    1.漏洞描述:文件上传漏洞,是指可以利用WEB上传一些特定的文件包含特定代码如(<?php phpnfo;?> 可以用于读取服务器配置信息.上传成功后可以点击) 上传漏洞是指用户上传了一个 ...

  6. Delphi使用Zxing创建二维码

    效果 DelphiZXingQRCode下载地址:https://www.debenu.com/open-source/delphizxingqrcode/ 为了调用方便unit DelphiZXIn ...

  7. 技术栈：springboot2.x,vue,activiti5.22,mysql,带工作流系统

    前言 activiti工作流,企业erp.oa.hr.crm等审批系统轻松落地,请假审批demo从流程绘制到审批结束实例. 一.项目形式 springboot+vue+activiti集成了activ ...

  8. confluence 开源破解

    一.安装 (一).开源agent   https://gitee.com/pengzhile/atlassian-agent (二).dockerfile FROM cptactionhank/atl ...

  9. 华为云计算IE面试笔记-FusionCompute虚拟机热迁移定义，应用场景，迁移要求，迁移过程

    *热迁移传送了什么数据?保存在哪? 虚拟机的内存.虚拟机描述信息(配置和设备信息).虚拟机的状态 虚拟机的配置和设备信息:操作系统(类别.版本号).引导方式(VM通过硬盘.光盘.U盘.网络启动)和引导 ...

  10. windows 创建cmd alias

    windows cmd bat alias 命令 别名 1. 创建文件 C:\cmd-alias.bat @doskey sayhello=echo Hello $* @doskey cattxt=t ...