window.onscroll = function () {

    if (document.documentElement.scrollTop + document.body.scrollTop > 100) {

        document.getElementById("scrollto").style.display = "block";

    }

    else {

        document.getElementById("scrollto").style.display = "none";

    }

}

原文https://www.cnblogs.com/youring2/archive/2012/11/21/2780315.html

js隐藏与显示回到顶部按钮的更多相关文章

  1. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  2. 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  3. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  4. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  5. Angular回到顶部按钮指令

    之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...

  6. 【Android】ListView监听上下滑动（判断是否显示返回顶部按钮

    设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity;   import java. ...

  7. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

  8. octopress添加回到顶部按钮

    准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_inc ...

  9. jQuery实现“回到顶部”按钮功能

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

随机推荐

  1. nginx + php 403 原因分析

    环境:nginx + php 问题: 配置的网站,访问出现报错:Access Denied (403) 常见解决方法: 1.文件权限问题 可能是文件权限问题,没有读权限. 或者selinux没有关闭. ...

  2. day006 数字类型和字符串类型的内置方法

    首先,为什么要有数据类型? 对于不同类型的变量,需要用不同的数据类型去描述. 数字类型的内置方法 数据类型又分为整形和浮点型.以下所述的内置方法均适用于这两个类型. 必须掌握的方法*** 数据类型有基 ...

  3. Python爬虫：HTTP协议、Requests库（爬虫学习第一天）

    HTTP协议: HTTP(Hypertext Transfer Protocol):即超文本传输协议.URL是通过HTTP协议存取资源的Internet路径,一个URL对应一个数据资源. HTTP协议 ...

  4. Day9 面向对象进阶

    @property装饰器 之前我们讨论过Python中属性和方法访问权限的问题,虽然我们不建议将属性设置为私有的,但是如果直接将属性暴露给外界也是有问题的,比如我们没有办法检查赋给属性的值是否有效.我 ...

  5. 在Ubuntu环境下搭建esp32开发环境

    第一步:下载必要的库文件   sudo apt-get install git make gcc libncurses5-dev flex bison gperf python-serial     ...

  6. nyoj112-指数运算

    指数运算时间限制:600 ms  |  内存限制:65535 KB难度:2描述写一个程序实现指数运算 X^N.(1<X<10,0<N<20)输入输入包含多行数据 每行数据是两个 ...

  7. 实体服务器安装centos7过程记录

    一次在实体服务器安装centos 7的过程记录 第一次在实体服务器上面安装服务器(centos 7),在此记录安装过程中遇到的一些坑. 系统版本:CentOS Linux release 7.6.18 ...

  8. Linux之浅谈VIM常见用法及原理图

    本次归纳以强大的VIM文本处理工具常见用法去展开论述. 文本编辑种类:       行编辑器:sed       全屏编辑器:nano,vi        vim - Vi改进 其他编辑器:     ...

  9. vue+ElementUI 日期选择器 获取时间戳

    <div class="block"> <span class="demonstration">daterange</span&g ...

  10. php unlink()函数使用

    最近在写个网站,需要上传图片,如果修改图片,就图片就没有用了,会占用服务器的硬盘资源,所以想到用unlink函数删除旧照片. 问题 : unlink函数只能删除 相对于函数执行文件的相对目录  或  ...