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

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. 模拟赛T1 素数

    没有链接 描述: 给p,q,求a^2+b^2 = p*q解的个数,p,q是素数 沙雕打表结论题 然后怼了3h吼爆零 题解 首先这是个结论题 然后这是证明 代码 #include <stdio.h ...

  2. BZOJ.2938.[POI2000]病毒(AC自动机)

    题目链接 \(Description\) 给n个模式串,问是否存在长度无限的主串,使得任何一个模式串都没有在主串中出现. \(Solution\) 先建AC自动机. 假设我们有了一个无限长的安全代码, ...

  3. 【Tsinsen-A1486】树(王康宁) 点分治 + Trie

    A1486. 树(王康宁) 时间限制:1.0s   内存限制:512.0MB   总提交次数:455   AC次数:97   平均分:52.62 查看未格式化的试题   提交   试题讨论 试题来源 ...

  4. Ural 2037. Richness of binary words 打表找规律 构造

    2037. Richness of binary words 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=2037 Descripti ...

  5. 使用 IntraWeb (22) - 基本控件之 TIWCalendar

    TIWCalendar: 日历控件, 继承于 TIWCustomGrid, 所以它和 TIWGrid 共同属性特多. 它的 Cell 是 TIWCalendarCell 对象, 直接从 TIWGrid ...

  6. 关于.net core程序的部署

    最近发布.net core程序的时候,发现它是可以独立部署的,它支持如下两种部署方式: 依赖框架的部署FDD.只发布我们的程序,运行前用户需要手动安装.net core runtime. 独立部署SC ...

  7. USBDM RS08/HCS08/HCS12/Coldfire V1,2,3,4/DSC/Kinetis Debugger and Programmer -- BDM Construction and Firmware

    Construction. Build the hardware using the information provided in the PCB download. The following a ...

  8. C# Windows服务开发从入门到精通

    一.课程介绍 大家都知道如果想要程序一直运行在windows服务器上,最好是把程序写成windows服务程序:这样程序会随着系统的自动启动而启动,自动关闭而关闭,不需要用户直接登录,直接开机就可以启动 ...

  9. NSNotificationCenter消息注册与撤销

    苹果的消息机制是个非常好用的东西,当需要在类的各个实例之间传递消息或者写一些事件驱动的程序时,绝对是个不错的工具.但是使用时一不小心就会造成引用已经被dealloc的对象的错误,引起程序崩溃.于是,在 ...

  10. command line subversion for windows

    安装 Slik SVN 之后,进入dos, 输入svn help,所有的命令和相关的信息都出来了   相关的svn命令:log.export等,可以搜索相应的文章: svn常用命令 svn log - ...