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. golang redis

    安装 下载第三方包: go get -u github.com/go-redis/redis/v9 连接 // 定义一个rdis客户端 var redisdb *redis.Client // 初始化 ...

  2. 虚拟数字存储表——SQLServer2012可高用

    窗口函数之虚拟数字辅助表 数字辅助表是一个整数序列,可以用它来完成多种不同的查询任务.数字表有很多任务,如生成日期和时间值序列,及分裂值列表.通常,建议在数据库中保存这样一个永久表,并填充尽可能多的数 ...

  3. hash类型数据的操作指令

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

  4. 优化技术专题-线程间的高性能消息框架-深入浅出Disruptor的使用和原理

    前提概要 简单回顾 jdk 里的队列: 阻塞队列: ArrayBlockingQueue主要通过:数组(Object[])+ 计数器(count)+ ReetrantLock的Condition (n ...

  5. MySQL查询结果集字符串操作之多行合并与单行分割

    前言 我们在做项目写sql语句的时候,是否会遇到这样的场景,就是需要把查询出来的多列,按照字符串分割合并成一列显示,或者把存在数据库里面用逗号分隔的一列,查询分成多列呢,常见场景有,文章标签,需要吧查 ...

  6. vue开发流程

    在安装node.js 测试安装  在cmd 下输入node   如查能正确输出命令提示符,表明安装好node 测试安装npm -v   如果能成功出现版本信息表示安装好npm 安装配置 G码云   或 ...

  7. docker-compose 的使用和负载均衡的初探

    docker-compose 的使用和负载均衡的初探 前言 a. 本文主要为 Docker的视频教程 笔记. b. 环境为 CentOS 7.0 云服务器 c. 上一篇:Docker 私有仓库 1. ...

  8. 【转载】linux 工作队列上睡眠的认识--不要在默认共享队列上睡眠

    最近项目组做xen底层,我已经被完爆无数遍了,关键在于对内核.驱动这块不熟悉,导致分析xen代码非常吃力.于是准备细细的将 几本 linux 书籍慢慢啃啃. 正好看到LINUX内核设计与实现,对于内核 ...

  9. CodeForce-811B Vladik and Complicated Book(水题)

    http://codeforces.com/problemset/problem/811/B 题意: 给定一个长度为 N 不重复的数字序列,然后对其进行 M 次询问. 每次询问含L,R,X三个值,问如 ...

  10. 数据结构逆向分析-Map

    数据结构逆向分析-Map map是一个典型的二叉树结构,准确的来说是一个平衡二叉树或者红黑树,特点是数据存储是有序的存储. 参考侯杰老师的stl源码剖析,map里面采用的是RB-TREE也就是红黑树 ...