首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何链接滚动到顶部按钮的内部滚动条而不是外部(主要的)?

要链接滚动到顶部按钮的内部滚动条而不是外部主要的滚动条,可以通过以下步骤实现:

  1. 首先,确保你的页面中有一个滚动到顶部的按钮,可以是一个按钮元素或者一个链接。
  2. 给这个按钮添加一个点击事件的监听器。
  3. 在点击事件的处理函数中,使用JavaScript获取到页面中的主要滚动条元素,通常是<body>或者<html>元素。
  4. 使用主要滚动条元素的scrollTop属性获取当前滚动条的位置。
  5. 使用主要滚动条元素的scrollTo()方法将滚动条滚动到顶部,设置滚动位置为0。

以下是一个示例代码:

代码语言:txt
复制
<button id="scrollToTopButton">滚动到顶部</button>

<script>
  const scrollToTopButton = document.getElementById('scrollToTopButton');

  scrollToTopButton.addEventListener('click', function() {
    const mainScrollElement = document.documentElement || document.body;
    const currentPosition = mainScrollElement.scrollTop;

    mainScrollElement.scrollTo({
      top: 0,
      behavior: 'smooth' // 可选,平滑滚动到顶部
    });
  });
</script>

这样,当用户点击滚动到顶部按钮时,页面会平滑滚动到顶部,而不是外部主要的滚动条滚动。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JQ事件和事件对象

首先来了解一下事件冒泡和捕获     事件冒泡:内部事件先触发,然后在触发外部事件     事件捕获:外部事件先被触发,然后在触发内部元素     mouseover()/mouseout()...  focusin可以在父元素上检测子元素获得焦点情况 focusout可以在父元素上检测子元素失去焦点情况  四 其他事件   1 scroll()滚动滚动条时触发事件      2  resize...event.pageX/event.pageY   鼠标相对于文件左侧和顶部位置   //会随着滚动条变化变化           //screenX/screenY  获取显示器屏幕位置坐标...//整个屏幕高度    不会随着滚动条变化变化          //clientX/clientY  获取相当于页面视口坐标 //除去上下窗口      不会随着滚动条变化变化 <script...以下是主要鼠标按钮映射代码对应表 Event.which属性值 对应鼠标按钮 1 鼠标左健 2 鼠标中健(滚轮键) 3 鼠标右健       6 event.preventDefault()  阻止事件默认行为

4.1K20

js点击按钮返回页面顶部

2016-08-22 03:08:28 在进行官网一类网站建设时,经常会出现页面太长现象,当用户滚动滚动条最底部时返回顶部需要滚动多下滚动条,用户体验相当不好,于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...,点击该按钮返回顶部,并且有一定效果。...该方法就是利用锚点方式来返回顶部。即给最顶部div设置一个id,然后a标签链接地址写成该id,当点击时就会返回顶部,但是缺点为过于突兀,因为是立即返回顶部。...来看一下代码吧: 返回顶部 上面代码当滚动条滚动到一定位置后出现该a标签,且该a标签position...jquery.js文件,点击之后滚动条会有一个滚动过程,不是一下子回到顶部,个人感觉不错。

25.1K10
  • 关于页面滚动两个 CSS 属性

    scroll-behavior 原先这个主题在文章下方作者是有一个分享文章 facebook 和 twitter 。在转移主题 Hexo 时候也就顺便复刻了下来。...删了后很空,那得加个东西,想了一下刚好少个返回顶部按钮,而且这个分享部件刚好在文章底部,很合适。...锚点定位其实很好用,但主要是太生硬了,点一下定位就瞬间冲过去了,没有任何过渡。很多人用JS来做返回顶部不用 CSS 可能就是锚点定位这个缺点。...只需要在滚动部分加上这么一段: html,body{ scroll-behavior:smooth; } 具体效果你已经可以点击右边文章目录或者底部按钮来试试了。...建议可以滚动地方都加上 scroll-behavior,不用白不用。 貌似目前主流浏览器都支持了,当然IE不是主流。

    69420

    Material Design — 菜单(Menus)

    菜单(Menus) Material Design链接:菜单 ? 菜单 菜单形式是在短暂动作条上展示选项列表。 菜单出现在与按钮,操作或其他控件交互中。...情景菜单 菜单是可滚动 如果菜单高度阻止其显示所有菜单项目,菜单可以在内部滚动。 一个例子是在横向上查看手机上菜单。 ?...可以内部滚动菜单 级联菜单(仅限pc) 级联菜单可根据菜单与屏幕垂直和水平边缘接近程度放置菜单。 ?...·简单菜单也应该应该显示在其触发元素上,不是下面(如下图)。 ? ·菜单宽度取决于字符串长度,在移动设备上定义为56dp单位倍数。...·内容可滚动时,菜单一直显示滚动条。 ·简单菜单最大高度应小于页面高度一行或多行。 这确保了可点击简单菜单之外区域来关闭菜单。 ·不在菜单中重复展示已选项(同Menus)。

    5.8K100

    html中下拉菜单(html做下拉菜单栏)

    下面我们通过代码与案例接受select跳转菜 html5怎么实现div+css二级下拉菜单 1.外部为ul标签,在每个li里嵌套一个ol列表 2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位...3.设置ol高为0,溢出隐藏 4.外部li标签:hover 时,设置ol高度。...McGrak 2018-11-03 | 浏览19 次 HTML编程语言html5 |举报 答题抽奖 首次认真答题后 即可获得3次抽奖 html5下拉菜单怎么弄上拉菜单 HTML5如何才能让导航栏固定顶部不动...2,后者是网页具体内容,这里代码比较简单。 3,在样式中,首先在菜单中定义一些样式。 4,此时,在运行页面时,滚动条滚动后导航将消失。...…如图,此为正常效果,但是在部分手机浏览器中,下拉列表中按钮没有显亲,欢迎来到CSS布局HTML,很乐意为你解答问题,目前并不是所有手机浏览器都支持HTML5+CSS3功能 所以并不是你使用了CSS3

    11.4K40

    小程序开发基础-scroll-view 可滚动视图区域

    在定义scroll-view时,要给它一个固定高度,通过wxss也可以内部样式,给设置个height属性,如style="height:200px;"。...代码中scroll-into-view="{{toView}}",toViewjs中data中。...,一个是点击效果为,下一个视图,如同翻页效果,点击按钮切换到下一个view,另一个按钮点击效果为,设置滚动条位置实现画面滚动,就是下移或上移等。....bc_yellow { background-color: yellow; } .bc_blue { background-color: blue; } 逻辑index.js,upper为滚动条滚到顶部时候触发...,lower为滚动条滚到底部时候触发,scroll为滚动条滚动后触发,tap为点击按钮切换到下一个view,tapMove为通过设置滚动条位置实现画面滚动

    2.4K40

    HTML中怎么做悬浮框?

    悬浮框是Web前端开发中一种常见网页特效,它悬浮于网页内容之上,不受滚动条影响,可以一直处于浏览器可视区域内。...通过悬浮框,我们可以为用户展示一些特定信息(如提示信息、广告信息),也可以在悬浮框中提供一些常用按钮(如“返回顶部按钮、“分享”按钮)方便用户操作。 下面为大家展示一些网页中常见悬浮框效果。...实际上,悬浮框做起来很简单,它主要是通过CSS代码来实现。在学习CSS时候,大家是不是都学过定位(position)呢?还有印象吗? 我们来回顾一下。...当对元素设置固定定位后,该元素将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该元素都会始终显示在浏览器窗口固定位置。...-- 悬浮框结构 --> 返回顶部 上述代码中,第2~7行代码用于简单填充网页内容,使网页出现滚动条

    7.1K41

    滚动,你真的懂了吗

    让我们来了解下哈 只有window窗体滚动 即页面只含有浏览器窗体默认滚动条,窗体滚动条随页面内容不断增长。 如手Q吃喝玩乐站点首页, 在android机上就是使用window滚动 ?...内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部不是浏览器窗体上布局。 故内滚动布局是相对传统window窗体滚动而言。...ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位问题) 例如,手Q吃喝玩乐站点首页, 在ios机上便是内滚动布局 ? 桌面软件或者客户端,如群活动 ?...); ---- 现在我们知道如何调用滚动条指定位置和获取滚动条偏移值,那么我们来做一个需求把 假设是这个页面 ?...需求描述 : 希望通过点击按钮,使绿色区域item,能够定位屏幕中间 这种需求很常见吧~ 那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

    1.1K10

    滚动,你真的懂了吗

    让我们来了解下哈 只有window窗体滚动 即页面只含有浏览器窗体默认滚动条,窗体滚动条随页面内容不断增长。 如手Q吃喝玩乐站点首页, 在android机上就是使用window滚动 ?...内滚动布局 什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部不是浏览器窗体上布局。 故内滚动布局是相对传统window窗体滚动而言。...ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位问题) 例如,手Q吃喝玩乐站点首页, 在ios机上便是内滚动布局 ? 桌面软件或者客户端,如群活动 ?...); 现在我们知道如何调用滚动条指定位置和获取滚动条偏移值,那么我们来做一个需求把 假设是这个页面 ?...需求描述 : 希望通过点击按钮,使绿色区域item,能够定位屏幕中间 这种需求很常见吧~ 那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

    1.6K70

    小智在这3年开发中遇到 CSS 问题及解决方案,有大佬帮他总结好了 !

    这是因为无论内容如何,scroll-y都会显示滚动条,这时候我们可以使用overflow: auto,它只会在需要时显示滚动条。 ?...长单词和链接 当在移动屏幕上阅读一篇文章时,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况发生 ?...简而言之,auto-fill将在不扩展列宽情况下对列进行排列,auto-fit只会在列为空情况下将列折叠零宽度。 8....解决方法不是当用户往下划动时候,固定头部需要回到文档中跟随屏幕滚动,可以使用position: sticky来快速达到该效果。...水平滚动条 由于元素宽度,有些元素会导致出现水平滚动条。 找到这个问题原因最简单方法就是使用 CSS outline。

    3.7K10

    《从案例中学习JavaScript》之实现网页版阅读器

    Paste_Image.png 当我滚动条往上滚动时候,屏幕右下角会出现一个向上箭头: ? Paste_Image.png 往下滚动时候,又自动消失。...再加上堆积在上面百层左右楼层,其宽广程度可说超乎想像。整体档案量大根本无法测量。 这样空间内部有好几个都市、为数众多小型街道与村落、森林和草原,甚至还有湖存在。...js控制 我们通过jQueryanimate方法来实现回到顶部动画,实现该功能核心逻辑就是控制滚动条距离顶部高度,也就是scrollTop,让它变为0就可以了。...123.gif 最后,我们还希望实现一个效果就是,只有在滚动条往上拖动时候,才把按钮显示出来,否则就隐藏该按钮。毕竟,我们在阅读时候都不希望一直有个小图标吧。...然后设置按钮透明度就行了,这时候,我们需要对滚动条进行监听,如果向上滚动就显示按钮,否则隐藏按钮,实现代码如下: var justScrollTop = 0; //记录上一次滚动条距离顶部位置 /

    1.3K60

    Js处理滚动条和日期框

    如果将元素拖动到可见区域之后,再去操作它,也就是处理这个滚动条。...滚动条不是html页面的元素,它是浏览器元素。想获取浏览器元素,就不能走常规套路啦,要通过javascript来执行。 不是所有的元素都一定要拖动到可见区域才能操作。...第一个参数是javascript脚本,你即将执行js语句,第二个是参数可以传多个。 3)JavaScript脚本中用什么东西来接收外部传进来参数呢? js语句有时候是不是要接受外部参数?...10)如何判定这个页面需要不需要这种滚动操作呢? 如果你被测系统某一个页面当中,因为太长了出现了滚动条,怎么做呢?...如果看到了不可见报错,前提必须确认其它方面都没有错,因为它不是在可视区才出现这个问题,那就再去加滚动。 滑轮往上拉,是和底部对齐。 滑轮往下拉,是和顶部对齐。 11)这个是和底部对齐: ?

    10.9K10

    获取图片位置(距离最顶部

    老规矩,先说需求: 需求是想要获取到图片位置,然后根据图片位置添加一个按钮 点击这个按钮 获取图片信息 正常来讲 这样需求 先获取dom 再遍历dom 往里面塞按钮就可以了 但是,考虑各型各色网站限制和...dom变化,这样就有很多问题, 所以就需要根据图片的当前位置(元素距离顶部位置(包括滚动条),和左边位置)来动态添加这个按钮 因为是hover触发 所以这个按钮只有一个 (这样做法是参考阿里以图搜图功能做...) ok 需求明白了之后 开始说怎么做 先说公式代码:( top: 图片距离顶部高度+滚动条高度,left:图片距离左侧高度) 1.滚动条高度     // 获取 当前 滚动条长度, 水平 ...:(主要方法:dom.getBoundingClientRect)       // 获取 dom 视口左侧和顶部相对位置       function getDomToViewPosition(id...然后absolut 根据dom位置 进行定位吧 举例看下面这张图: 图片 这张例图距离left为:20 距离上为:266.515625 当前滚动条高度为:4683 按照我们公式 我们动态添加按钮位置应该是

    2K10

    js如何实现阅读完协议后才可以注册

    控件内,我们可以监听文本域onscroll滚动事件 并借助滚动高度(`scrollHeight·)来判断用户是否阅读完文本域中协议,然后来激活启动用户注册按钮 html代码 <textarea...textareaonscroll滚动事件,并借助滚动高度scrollHeight,当文本域距离顶部距离与文本域可视区域高度大于文本域滚动高度式 那就说明用户已经看完了协议内容,然后可以激活启动用户注册按钮状态...元素,scrollTop:距离顶部距离 元素.clientHeight: 元素高度,它是固定,包括padding但不包括border、水平滚动条、margin元素高度,与元素滚动、位置没有关系...,它代表元素自身高度 元素.scrollHeight: 滚动条滚动高度,代表在有滚动条时,滚动条向下滚动距离也就是元素顶部被遮住部分高度,在没有滚动条时,那么它scrollTop:0,可以获取设置一个元素内容垂直滚动距离...,代表这个元素顶部视口可见内容(顶部距离。

    1.2K30

    从 antDesign 来窥探移动端“滚动穿透”行为

    您可能还注意,当滚动内容页面顶部有一个包含滚动内容对话框时,一旦到达对话框滚动边界,底层页面就会开始滚动 - 这称为滚动链接。...将可滚动元素拖动至顶部或者底部时,继续拖动触发最近可滚动祖先元素滚动。 还有另一种常见场景,我们在某个可滚动元素上进行拖动时,当该元素滚动条已经到达顶部/底部。...这样滚动意外行为用专业术语来说,被称为**滚动链接(Scroll Chaining)**。 那么,它是如何产生呢?或者换句话说,浏览器哪条约束规定了这样行为?...// 3.5 当 status 为 01 时(对应 3.2 滚动条顶部),此时当用户从下往上拖动时,需要阻止意外滚动行为发生。否则,则不需要阻止正常滚动。...,因为它并不是我们主要想赘述内容。

    49120

    防御式CSS是什么?这几点属性重点防御!

    在这个例子中,我们在右边有一个section标题和一个操作按钮。目前,它看起来还不错。但是,如果标题再长一些,会发生什么呢? 注意文本太靠近按钮了吗?...当用户上传一个不同大小图像时,它将被拉伸。这可不是什么好事。看看图像是如何被拉伸! 最简单修复方法是使用CSS object-fit。...根据浏览器高度进行测试可以发现一些有趣问题。 这里有一个我见过多次例子。我们有一个带有主要和次要链接组件。次要链接应该位于旁白部分最底部。 考虑一下下面的例子。主导航和次导航看起来还不错。...尽管如此,强烈建议使用auto作为overflow值。考虑以下例子: 请注意,即使内容很短,也有一个滚动条可见。这对一个用户界面来说并不是好事。...这些滚动条通常是不透明,并从相邻内容中占用一些空间。 请看下图: 请注意,由于显示了滚动条,当内容变长时,它是如何移位。我们可以通过使用scrollbar-gutter属性来避免这种行为。

    4.4K30

    干好这件事,卷死所有同行

    表单构件解析 标签 标签即可以理解为标题意思,用简洁文字让用户知道应该输入内容;根据标签所属位置,大致可以分为:顶部标签、左对齐标签、右对齐标签、内联标签、图标标签以及浮动标签,下面我们主要介绍前三个...顶部标签 与输入域左垂直对齐 优点:节省水平空间,标签长度弹性大,可以加快浏览和处理速度。 缺点:垂直空间占用比较大,表单项多时需增加页面滚动。...由于提示信息这块比较简单,输入中和输入后验证我就不再啰嗦啦。 输入前 其他 输入格式 根据用户记忆结构(7±2法则),采用合理格式约束,能够方便用户更快完成填写,减少错误出现。...弹框和页面如何选择 当承载东西较多,适合分步骤或者大表单时建议新开一个页面,当表单数量不多时,可以用弹框。...滚动条 表格宽度过长- 滚动条最好出现在表格中,不是在页面级别。 弹框过长-滚动条最好出现在弹框中,不是页面级别滚动。 避免出现滚动条套娃。 好啦以上就是全部啦!

    2.6K10

    DOM 和 BOM 中各种宽高属性

    不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制部分 window.outerHeight/window.outerWidth: 返回表示窗口外部高度/宽度数字。...包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制部分 image.png 1.2 与屏幕相关 window.screen.width/window.screen.height: 返回表示屏幕宽度...注意:IE 和 Opera 下表示是窗口文档区屏幕距离,这意味着窗口最大化时,screenTop 返回是窗口顶部高度不是 0。...image.png 例如,上图中红框是固定屏幕可视区,网页视为可以上下拖动文档,当滚动条下拉时候,实际上是文档向上拖动,而这个拖动距离就是 element.scrollTop 2.4 返回对象系列...窗口无滚动条时,该属性与 ev.clientX/ev.clientY 等价;窗口出现滚动条时,该属性值将更大,因为它针对是整个页面,即包含已滚动区域。

    1.9K10

    Chrome 115 有哪些值得关注新特性?

    比如下面图中这种比较常见,页面顶部进度条随着滚动变化: 另外还可以依靠页面滚动来驱动页面上元素淡入淡出: 一项新 Scroll-driven Animations 规范定义了两种可供我们使用新时间线类型...: Scroll Progress Timeline: 链接滚动容器沿特定轴滚动位置时间线。...View Progress Timeline: 链接到特定元素在其滚动容器内相对位置时间线。 下面是一个代码示例,它使用匿名滚动进度时间轴创建固定在页面顶部阅读进度指示器。...,我们可以创建一个新 ScrollTimeline 实例,它接受以下两个参数: source:对要跟踪其滚动条元素引用,用于 document.documentElement 定位根滚动条。...外部 display 类型描述元素是块级还是内联,内部显示类型描述容器中子元素应该如何表现。 因此,display 多关键字语法允许分别指定内外两个 display 类型。

    35831

    Web浏览器滚动方案一览| rAF等

    这些不一致来源于远古时代,不是“聪明”逻辑。获取当前滚动获取文档或DOM元素当前滚动状态是前端开发中很常见需求。...例如:window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面和单个元素都起作用,常用于点击某个按钮滚动到页面指定位置,或者滚动元素内部内容...它有一个参数alignToTop:如果 top=true(默认值),页面滚动,使 elem 出现在窗口顶部。元素上边缘将与窗口顶部对齐。...如果它增加了(滚动条消失后),那么我们可以在 document.body 中滚动条原来位置处通过添加 padding,来替代滚动条,这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同。...亦或是参考这篇文章:css - 如何解决滚动条scrollbar出现造成页面宽度被挤压问题?

    13810
    领券