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. Match 基因匹配 题解(From luoguBlog)

    N<=20000!N2的LCS要原地爆炸. 去您妈的优化考场上有分就行TLE60真香嘿嘿嘿 然而这显然是个板子只不过像我这样见识短浅的蒟蒻不知道罢了 正解: 某大佬的博客 转化为lis后二分 复 ...

  2. React Native - 使用Vibration API实现设备振动

    有时程序中需要实现这样的功能,当有重要的消息提醒时,我们会发出声音告知用户.而如果用户关闭了声音,那么就可以改用振动来提醒用户. 使用 React Native 提供的 Vibration API,我 ...

  3. day008 字符编码之 字符编码 、Python2和Python3字符编码的区别

    计算机基础(掌握) 启动应用程序的流程 双击qq 操作系统接受指令然后把该操作转化为0和1发送给CPU CPU接受指令然后把指令发送给内存 内存接受指令把指令发送给硬盘获取数据 qq在内存中运行 文本 ...

  4. 小程序组件 Vant Weapp 安装

    文件夹的名称必须是英文 第一步:npm init -y 第二步:npm i vant-weapp -S --production

  5. Selenium的定位元素

    1.浏览器操作 # 刷新 driver.refresh()   # 前进 driver.forward()   # 后退 driver.back() 2.获取标签元素 # 通过ID定位目标元素 dri ...

  6. for 循环的反汇编浅析

    for 循环 for 循环是使用频度最高的循环结构,我们通过 C 语言反汇编实例,来分析 for 循环结构在计算机底层的原理和构造.首先,我们编写一个简单的 for 循环: 为了方便观察,我们用十六进 ...

  7. JDK环境变量设置（linux）

    1.下载jdk1.8版本软件包 2.解压 tar -zxvf jdk1.8.tar.gz mv jdk1.8 /usr/local/ 3.添加环境变量 vim /etc/profile 在文件底部加入 ...

  8. ASP.NET Core多平台部署 (Windows Server+IIS与CentOS 7+Nginx)

    一,Windows Server+IIS部署 1,安装配置IIS,这个应该都不用多说了,教程一堆 2,下载安装.NET Core Runtime 与 .NET Core SDK,下载请点击下载地址,如 ...

  9. 使用timthumb.php截取文章缩略图

    wordpress自带的缩略图功能会对每次上传的所有图片根据设置的图片尺寸进行裁剪,并把原图和裁剪后的图片保存在网站空间中,图片只裁剪一次,更改设置的尺寸不会重新生成,这样不仅占用主机空间,以后改版网 ...

  10. （28）SpringBoot启动时的Banner设置【从零开始学Spring Boot】

    对于使用过Spring Boot的开发者来说,程序启动的时候输出的由字符组成的Spring符号并不陌生.这个是Spring Boot为自己设计的Banner: 1.    .   ____       ...