在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它

Html代码:

<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>

Css代码:

#scrollup{
background: #777;
color:#eee;
font-size: 40px;
text-align: center;
text-decoration: none;
bottom:65px;
right:20px;
overflow: hidden;
width:46px;
height:46px;
border:none;
}

以上就是箭头所指按钮的样式啦,接下是实现滚动条监听事件~

javascript代码:

<script type="text/javascript">
  window.onscroll= function(){
  //变量t是滚动条滚动时,距离顶部的距离
var t = document.documentElement.scrollTop||document.body.scrollTop;
var scrollup = document.getElementById('scrollup');
//当滚动到距离顶部200px时,返回顶部的锚点显示
if(t>=200){
scrollup.style.display="block";
}else{ //恢复正常
scrollup.style.display="none";
}
}
</script>

关于如何使用javascript监听滚动条滚动事件的更多相关文章

  1. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  2. JavaScript监听滚动条的进度条

    <style type="text/css"> *{ margin: 0; padding: 0; } .g-box{ width: 100%; height: 400 ...

  3. 监听table滚动事件,滚动到底部时加载数据

    mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...

  4. Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  5. js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...

  6. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  7. bootstrap modal 监听滚动条事件

    bootstrap modal 里面使用datetimepicker时间控件,滚动时,时间控件并不会隐藏,这是一个小bug,在组里改下,当滚动条滚动时,直接隐藏这个时间控件,$("#alar ...

  8. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  9. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

随机推荐

  1. SPOJ.1812.LCS2(后缀自动机)

    题目链接 \(Description\) 求最多10个串的LCS(最长公共子序列). \(Solution\) 类比上题,对一个串建SAM,我们可以逐串地求出其在每个节点所能匹配的最大长度mx[i]. ...

  2. pygame系列_font游戏字体_源码下载

    在pygame游戏开发中,一个友好的UI中,漂亮的字体是少不了的 今天就给大伙带来有关pygame中字体的一些介绍说明 首先我们得判断一下我们的pygame中有没有font这个模块 if not py ...

  3. 【原】Spring整合Redis(第二篇)—SDR环境搭建具体步骤

    [环境参数] Spring版本:4.2.6.RELEASESpring-Data-Redis版本:1.7.2.RELEASE Redis版本:redis-2.4.5-win32-win64 [简要说明 ...

  4. CentOS 7搭建KVM在线管理面板WebVirtMgr之使用SSH授权登录

    环境:CentOS 7.4 1.创建SSH私钥和ssh配置选项(在安装了WebVirtMgr的系统上): # 切换到nginx用户su - nginx -s /bin/bash # 生产ssh密钥 s ...

  5. Optimizing Oracle RAC

    Oracle Real Application Clusters (RAC) databases form an increasing proportion of Oracle database sy ...

  6. In-Place upgrade to Team Foundation Server (TFS) 2015 from TFS 2013Team Foundation Server TFS TFS 2015 TFS upgrade TFS with Sharepoint

    This upgrade document gives detailed step by step procedure for the In-Place upgrade from TFS 2013 t ...

  7. C#复制数组的两种方式,以及效率比较

    如何高效地进行数组复制? 如果把一个变量值复制给另外一个数组变量,那么2个变量指向托管堆上同一个引用. 如果想在托管堆上创建另外的一份数组实例,通常使用Array.Copy方法. class Prog ...

  8. FieldExists

    import arcpy import os import sys def FieldExists(TableName,FieldName): desc = arcpy.Describe(TableN ...

  9. 三张图让你高速明确activity与fragment生命周期的异同点

    第一张图:activity的生命周期 第二张图:fragment的生命周期 第三张图:activity与fragment生命周期对照 补充:假设你还是不明确,请翻译一下你不理解的相应单词. ----- ...

  10. .NET:自定义配置节

    背景 对于编译型应用程序来说,参数化程序行为是非常有必要的,.NET有其标准的配置方法,我们可以可以扩展. 示例 代码 using System; using System.Collections; ...