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. python利用numpy存取文件

    NumPy提供了多种存取数组内容的文件操作函数.保存数组数据的文件可以是二进制格式或者文本格式.二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型. numpy格式的文件可以保存为后缀 ...

  2. Python 文件操作 day2

    一.打开文件的模式1:读.写.追加 1.r读:读模式,只能读,不能写,打开不存在的文件会报错:可省略'r',因为不写默认是读模式 f = open('filename',encoding='utf-8 ...

  3. vue 中引入Jquery插件

    import $ from '../../static/js/jquery.min.js' window.jQuery = $; require('../../static/js/jquery.zoo ...

  4. centos 7.2 安装php56-xml

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

  5. POJ 1987

    T_T为毛会这样子,我的写就是过不了,....... 其实这题不难,很容易想到吧,我一开始也想着用枚举这类方法,但复杂度实在不敢想,没想到,真的是用这种方法.. 今天学了一个叫树的重心,可以使分治的子 ...

  6. AutoReplace in pl/sql developer

    AutoReplace in pl/sql developer SL=SELECT S*=SELECT * FROM 2D=TO_DATE('2017-01-01 01:01:00','YYYY-MM ...

  7. poj 3267 The Cow Lexicon (动态规划)

    The Cow Lexicon Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8167   Accepted: 3845 D ...

  8. 积跬步，聚小流------界面经常使用的jeecms标签

    * JEECMS初印象 第一次接触JEECMS,突然脑海就浮现了一句话"20元建站,立等可取",原来这都是真的... * JEECMS的界面经常使用标签 临时忽略掉环境搭建.栏目配 ...

  9. 支持中文的基于词为基本粒度的前缀树（prefix trie）python实现

    Trie树,也叫字典树.前缀树.可用于"predictive text"和"autocompletion".亦可用于统计词频(边插入Trie树边更新或加入词频) ...

  10. JeeCG团队招聘啦！

    JeeCG团队招聘啦! 小团队攻坚,创业氛围浓厚.盼望有激情的你增加. 岗位描写叙述: 1,负责Jeecg.jeewx 微信管理系统相关的研发工作.2,高度參与整个产品设计.參与微信相关项目开发.3. ...