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之requests模块-response

    response类故名思议,它包含了服务器对http请求的响应.每次调用requests去请求之后,均会返回一个response对象,通过调用该对象,可以查看具体的响应信息. 示例如下: import ...

  2. 《DotNet Web应用单文件部署系列》一、pubxml文件配置

    很多人想用DotNet开发软件赚点外快子补添家用,但心里总放不下心来,担心被人破解了.好消息是去年发布的DotNet 5支持单文件部署,不同于DotNet 3运行时将文件释放到临时文件夹内,DotNe ...

  3. 《DotNet Web应用单文件部署系列》二、打包wwwroot文件夹

    在这篇文章中,你将学到web缓存规则,文件传输中用到的压缩格式,以及如何手写代码响应请求.最后还能学到快速打包wwwroot文件夹组件用法. 一.了解Response Header 当第一次加载程序时 ...

  4. JS009. 数组去重的多种方法总结与一步步优化

    两层for循环 这种函数的优点是兼容性好比较通用,缺点是时空复杂度都很直观的为O(n2),不利于维护和性能. var array = [1,1,'1','1'] function unique(arr ...

  5. 离散化模板题 II ——重复元素离散化后的数字不相同

    离散化模板题 II --重复元素离散化后的数字不相同 题目描述 现有数列A1, A2, ⋯, An,数列中可能有重复元素. 现在要求输出该数列的离散化数列,重复元素离散化后的数字不相同. 输入 第一行 ...

  6. 深入学习Composer原理（四）

    本系列第四篇文章,也是最后一篇 首先,我们先看看Composer的源码从哪里看起.当然,请您先准备好源码. composer init或者直接install之后,自动生成了一个vendor目录,这时您 ...

  7. 数据库删除discuz 部分数据操作

    如何快速清理discuz 3.2 中等待审核的回复数:pre_forum_post_moderate,点击清空 清空回收站的主题帖:DELETE FROM `pre_forum_thread` WHE ...

  8. redis 设置密码 laravel框架配置redis

    * 参考资料 redis文档             http://www.redis.cn/documentation.html,  http://redisdoc.com/index.html r ...

  9. 一文让你掌握软件测试工程师SQL面试题

    数据结构说明 已知有如下4张表: 学生表:student(学号,学生姓名,出生年月,性别) 成绩表:score(学号,课程号,成绩) 课程表:course(课程号,课程名称,教师号) 教师表:teac ...

  10. PolarDB PostgreSQL 快速入门

    什么是PolarDB PostgreSQL PolarDB PostgreSQL(下文简称为PolarDB)是一款阿里云自主研发的云原生数据库产品,100%兼容PostgreSQL,采用基于Share ...