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

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. 1257: [CQOI2007]余数之和

    题目链接 bzoj1257: [CQOI2007]余数之和 题解 数论分块,乘等差数列求和 代码 #include<bits/stdc++.h> using namespace std; ...

  2. BZOJ.2806.[CTSC2012]Cheat(广义后缀自动机 DP 单调队列)

    题目链接 首先二分答案L.然后就是判断能否将原串划分出一些长度不小于L的子串,这些子串要是给定n个串中的某个串的子串,且满足它们的长度之和不小于原串长度的90%. 贪心多长选一段什么的显然不对.老老实 ...

  3. BZOJ4242 : 水壶

    对于任意两个建筑物,以它们之间的最短路为边权求出最小生成树. 则询问(x,y)的答案为最小生成树上x到y路径上边权的最大值. BFS求出离每个点最近的建筑物以及到它的距离,可以发现只有交界处的边才有用 ...

  4. Xtreme9.0 - Car Spark 动态规划

    Car Spark 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/car-spark Descr ...

  5. java读取记事本文件第一个字符遇到的一个坑

    记事本数据是这样的: Faq_faqTitle=常见问题_标题Faq_faqKeyword=关键字Faq_faqDescription=FAQ描述...... 文件编码:utf-8有签名 然后用jav ...

  6. API网关的设计思路及落地 IT大咖说 - 大咖干货,不再错过

    API网关的设计思路及落地 IT大咖说 - 大咖干货,不再错过   http://www.itdks.com/dakashuo/new/dakalive/detail/1407

  7. HDU 4763 Theme Section (2013长春网络赛1005,KMP)

    Theme Section Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  8. HAL驱动的串口编程陷阱

    http://bbs.elecfans.com/jishu_464356_1_1.html 手上有块NUCLEO STM32L053x板子,用来做串口实验,看了下ST的最新库HAL驱动,于是想用HAL ...

  9. C#消息队列(RabbitMQ)零基础从入门到实战演练

    一.课程介绍 如果您从工作中之听过但未有接触过消息对队列(MQ),如果你接触过一点关于MQ的知识,如果没有这么的多如果的话......,那么阿笨将通过本次<C#消息队列零基础从入门到实战演练&g ...

  10. [Winform]无边框窗口悬浮右下角并可以拖拽移动

    摘要 简单实现了一个这样的功能,程序启动时,窗口悬固定在右下角,并可以通过鼠标拖拽移动. 核心代码块 无边框窗口并不出现在任务栏 //无边框 this.FormBorderStyle = System ...