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. Testbench文件编写纪要（Verilog）

    之前在使用Verilog做FPGA项目中.以及其他一些不同的场合下,零散的写过一些练手性质的testbench文件,开始几次写的时候,每次都会因为一些基本的东西没记住.写的很不熟练,后面写的时候稍微熟 ...

  2. PAT_A1015#Reversible Primes

    Source: PAT A1015 Reversible Primes (20 分) Description: A reversible prime in any number system is a ...

  3. Day7 字符串和常用数据结构

    字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...

  4. vue scss 安装

    1.开始在vue项目中使用sass,在命令行输入一下命令进行安装(使用git命令行要用shift+insert 进行粘贴否则粘贴不上) cnpm install node-sass --save-de ...

  5. LA 3363

    Run Length Encoding(RLE) is a simple form of compression. RLE consists of the process for searching ...

  6. mongodb集群搭建（分片+副本）

    原文地址:https://www.cnblogs.com/ityouknow/p/7344005.html 相关概念 先来看一张图: 从图中可以看到有四个组件:mongos.config server ...

  7. workspace 配置

    1.新建workspace 在配置好相关信息前,请勿引入工程代码,避免环境不完整的情况下编译进入长时间等待 2.设置工作窗体结构 建议使用Java模式开发窗体设置 3. 编码 工程全部采用UTF-8编 ...

  8. ecshop3 调用指定分类下推荐/热卖/新品商品，可指定调用数量

    第一步:--------------------------------------------------------------------------------------/** * 取指定分 ...

  9. 在centos6上面安装python3.4

    mkdir -p /work cd /work gwet https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tar.xz tar -axf Py ...

  10. STM32的IO配置点灯

    1.led.c的详细的代码: /*----------------------------------------------------------*/ #include "led.h&q ...