Smooth scrollTop按钮onclick - 腾讯云开发者社区

文章/答案/技术大牛

发布

Scroll，你玩明白了嘛？

scroll-behavior: smooth; 比如说，在文档网站里，我们常使用 # 来去定位到对应的浏览位置。...2.3 注意 1、在可滚动的容器上设置了 scroll-behavior: smooth 之后，其优先级是高于 JS 方法的。...3.3 scrollIntoView 的奇怪现象 3.3.1 页面整体偏移最近在过一些历史用例的时候，遇到了这种情况：现象大概就是，当我通过按钮，滚动定位到聊天区域的某条消息时，页面整体发生了偏移...核心的交互是： 1、当用户没有人为滚动文稿时，会保持自动翻页的功能 2、当用户人为滚动文稿时，后续将不会自动翻页，并出现 “回到当前播放位置” 的按钮 3、假如点击了 “回到当前播放位置” 的按钮，会回到目标位置...false; }); }; return ( <button className="btn" onClick

3.9K2 2

JavaScript基础②

} // 关闭按钮的点击事件 off.onclick = function () { // 关闭标签页 window.close() } </script...} // 按钮添加点击行为 go.onclick = function () { // 浏览器滚动到指定位置 window.scrollTo({...left: 300, top: 400, behavior: 'smooth' }) } js定时器间隔定时器...给全选按钮绑定事件 allBtn.onclick = function () { // 2-1....给每一个选项按钮绑定点击事件 items[i].onclick = function () { // 3-2. 首先定义假设变量.

1.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端实战项目·优雅实现 BackTop

优雅实现 BackTop BackTop 即滚动到页面顶部，是很多网站都会用到的基础功能，实现方法很多，Github 上也有许多优秀的三方库，如 smooth-scroll，但如何优雅实现也是一门学问...事件绑定和解绑滚动到页面顶部的按钮一般位于页面角落，并且只有在需要的时候才显示出来。所以首先需要监听页面滚动事件，直到滚动到一定距离后显示 BackTop 按钮。...|| document.body.scrollTop scrollTop(window, sTop, 0, 2000) } 扩展：该 API 还提供 cancelAnimationFrame 方法用来取消重绘...options 是一个包含三个属性的对象： top 等同于 y-coord，代表纵轴坐标 left 等同于 x-coord，代表横轴坐标 behavior 类型 String，表示滚动行为，支持参数 smooth...(平滑滚动)，instant(瞬间滚动)，默认值 auto，效果等同于 instant window.scrollTo({ top: 0, behavior: 'smooth' }) 此方法简单高效

7894 0

scrollTop和scrollHeight「建议收藏」

scollTop scrollTop 可以被设置为任何整数值，同时注意：如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为...设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值....总结：元素发生溢出时可以设置scrollTop，设置的值为元素里内容向上滚动的不可见区域的高度 scollHeight 判定元素是否滚动到底如果元素滚动到底，下面等式返回true，没有则返回false... onClick...="scrollToTop()">按钮1 onClick="read()">按钮2 console.log

1.1K2 0

JavaScript 基本知识

; } 设置滚动条位置 // 瞬间定位 window.scrollTo(left, top); // 参数为卷去得长度 // 定位方式 smooth 平滑滚动 window.scrollTo({...，否则隐藏点击回到顶部按钮，滚动条滚动回到顶部布局结构: 需要一个顶部通栏标签和一个回到顶部按钮标签让页面超过浏览器可视窗口高度设置顶部通栏样式，默认是在超出页面的设置回到顶部按钮样式，默认是在隐藏的...= function () { window.scrollTo({ top: 0, behavior: 'smooth' }) } ----...多项CheckBox选择卡全选功能确认需求: 全选按钮点击的时候,根据自身状态决定所有选项按钮状态点击每一一个选项按钮的时候,根据所有选项按钮状态决定全选按钮状态按钮全部回归原始，当前高亮点击哪一个按钮，其他盒子全部隐藏，当前索弓对应盒子显示布局结构: 三个表示按钮的盒子，横向排列，初始一个高亮三个显示内容的的盒子，在同一位置不同层级排列，初始一个显示

2.6K1 0

介绍一个页面平滑滚动小技巧

1.scrollTop 第一想到的还是 scrollTop, 获取元素的位置，然后直接设置: // 设置滚动的距离element.scrollTop = value; 不过这样子有点生硬，可以加个缓动效果...: 0;}); 2. scroll-behavior 把 scroll-behavior:smooth; 写在滚动容器元素上，也可以让容器（非鼠标手势触发）的滚动变得平滑。....list { scroll-behavior: smooth;} 在PC上, 网页默认滚动是在 html 标签上的，移动端大多数在 body 标签上, 那么这行定义到全局的css中就是: html,...Options 可选对象 { behavior: "auto" | "instant" | "smooth", 默认为 "auto"。...instant`和`smooth表示`直接滚到底`和`使用平滑滚动`。 2. block表示块级元素排列方向要滚动到的位置。

1.8K2 0

点击按钮，回到页面顶部的5种写法

2000px;"> 2 回到顶部 3 4 test.onclick...2000px;"> 2 回到顶部 3 4 test.onclick...如果没有提供该参数，默认为true,使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...的动画效果使用定时器，将scrollTop的值每次减少50，直到减少到0，则动画完毕 var timer = null; box.onclick = function(){...值获取，每次减少50，直到减少到0，则动画完毕 var timer = null; box.onclick = function(){ cancelAnimationFrame(timer

4K3 0

Snapaper | 一个「伪」刷题网站的诞生

="location.reload();">Refresh'; //修改按钮 $('#notice')[0].style.display = 'unset'; //显示提示 var...id $(change).attr('onclick', 'add_items('+ id +')'); //修改按钮onclick $(change)[0].innerHTML = 'Add to...List'; //修改按钮文本 $(change)[0].className = 'papers-list-td-btn1'; //修改按钮css console.log($('#download_items...|| document.body.scrollTop; currentPosition -= 50; if (currentPosition > 0) { window.scrollTo(0,...= document.body.scrollTop + document.documentElement.scrollTop; } window.onscroll = function () { if

5832 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度　　由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...:fixed;right:0;bottom:0">回到顶部 test.onclick = function(){ document.body.scrollTop...如果没有提供该参数，默认为true 　　使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...的动画效果　　使用定时器，将scrollTop的值每次减少50，直到减少到0，则动画完毕 var timer = null; box.onclick = function(){...值获取，每次减少50，直到减少到0，则动画完毕 var timer = null; box.onclick = function(){ cancelAnimationFrame

7.5K2 1

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

根据标准，我们可以通过元素的scrollLeft和scrollTop属性来获取其当前水平和垂直滚动的像素位置。对于整个页面，我们可以使用document.documentElement的这两个属性。...例如：window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面和单个元素都起作用，常用于点击某个按钮后滚动到页面指定位置，或者滚动元素内部内容...可以取值为 smooth（平滑动画）、instant（立即发生）或 auto（由 scroll-behavior 的计算值决定）。...export const rAFScrollTo = (el: HTMLElement, to: number, duration: number) => { const start = el.scrollTop...window.addEventListener('wheel', cancelRAF) const animateScroll = () => { currentTime += increment el.scrollTop

7281 0

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。...判分标准实现点击侧边按钮快速定位内容功能，得 2 分。实现侧边按钮文字颜色随页面内容滚动而变化功能，得 3 分。...="toFunction.call(this,0)">顶部 onclick...var scrollTopValue = document.documentElement.scrollTop;：获取当前页面的滚动高度。...点击链接：用户点击侧边栏上的链接，触发 onclick 事件，调用 toFunction 函数。 toFunction 函数将页面滚动到指定的高度。 3.

1.4K0 0

关于IOS10系统内微信公众号地图的显示问题

components/geolocation/geolocation.min.js"> 点击下面的按钮...，获得对应信息： onclick="geolocation.getLocation(showPosition,...showErr, options)">获取精确定位信息 onclick="geolocation.getIpLocation(showPosition, showErr...)">获取粗糙定位信息 onclick="showWatchPosition()">开始监听位置 onclick="showClearWatch...; document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight; }

8335 1

说说几个 API 和应用案例

它包含以下属性，这些属性都是可选的： behavior 定义动画过渡效果， "auto"或 "smooth" 之一。...key 是为了“上锁”，如果不上锁，多次点击 start 按钮后页面会滚动的越来越快。而使用了 key 变量只有第一次点击 start 按钮后才起作用。点击 stop 按钮后再把锁解开。...scrollTop 不一定兼容，可以使用下面的方法来获取： function getScrollTop(){ 　　return document.documentElement.scrollTop ||...document.body.scrollTop; } document.scrollingElement.scrollTop 也可以获取到 scrollTop 的值。..." }); } } behavior: "smooth" 可以让滚动有平滑效果。

2.1K2 0

你也许不知道的浏览器的一些滚动行为

或者利用scrollTop设置： document.scrollingElement.scrollTop = 100; 注意：scrollTo跟scrollBy的参数是一样的，区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动...利用每个方法的参数设置： window.scrollTo({ behavior: "smooth" }); window.scrollBy({ behavior: "smooth" });...document.querySelector(".box").scrollIntoView({ behavior: "smooth" }); 效果如下： 2....或者用css属性设置： html { scroll-behavior: smooth; // 全局滚动具有平滑效果 } // 或者所有 * { scroll-behavior: smooth;...} 效果如下：注意：设置了该属性之后，所有方法都可以不用设置behavior参数了，二选一即可，因为都是控制当前指定元素的滚动行为，所以锚点跳转、设置scrollTop也具有平滑(smooth)的滚动行为

4K2 0

手机端网页使用html5地理定位获取位置失败的解决办法

geolocation/geolocation.min.js"> 点击下面的按钮...，获得对应信息： onClick="geolocation.getLocation...(showPosition, showErr, options)">获取精确定位信息 onClick="geolocation.getIpLocation...(showPosition, showErr)">获取粗糙定位信息 onClick="showWatchPosition()">开始监听位置 onClick="showClearWatch()">停止监听位置 <script type="text/JavaScript

5.8K6 0

scrollTop与offsetTop研究

虽然我是做后台出身的，但最近心血来潮越来越关注前台技术了^_^，前二天看了“司徒正美”先生的图片无缝滚动分析后，对于scrollTop和offsetTop这二个以前一直没搞太明白的属性研究了一番，大致弄明白了...doctype html> scrollTop study .outer{}{ position:relative;...> var btn = document.getElementById("btnTest"); btn.onclick...++ ; result.innerHTML = "container.scrollTop=" + outer.scrollTop + ",item2.offsetTop...hidden(隐藏),然后里面放了二个100*60的子div,显然60*2=120px，大于最外层容器的100px高度，所以会有一部分被截掉，为了更形象，二个子div上面还放置了一行文字,高度为18px,点击按钮后

1.4K5 0

前端学习(50)~事件的绑定和事件对象

这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。...DOM1的写法：onclick element.onclick = function () { } 举例：点我 ...【重要】举例：按钮 var btn = document.getElementsByTagName("button")[...scroll() { return { //此函数的返回值是对象 left: window.pageYOffset || document.body.scrollTop...|| document.documentElement.scrollTop, right: window.pageXOffset || document.body.scrollLeft

1.3K2 0

三、jQuery属性操作

给按钮添加点击事件 var btn = document.getElementsByTagName('button')[0] btn.onclick =...方法 1、获取滚动偏移量元素 Javascript btns[0].onclick = function () { console.log($('.scroll').scrollTop...常用写法如下： Javascript console.log($('html').scrollTop()+$('body').scrollTop()) console.log($('html').scrollTop...元素 Javascript btns[1].onclick = function () { $('.scroll').scrollTop(300) } 网页 Javascript 同样的...通常写法如下： Javascript $('html,body').scrollTop(300) $('html').scrollTop(300)

4.3K2 0

（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十五）：Event事件对象；移动爱心案例；Bubble事件冒泡；基于冒泡的事件委派处理

button 返回当事件被触发时，哪个鼠标按钮被点击。 clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。...var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft...js varbox=document.getElementById("box"); var innerBox=document.getElementById("innerBox"); innerBox.onclick...// event.cancelBubble=true; alert("innerBox的点击事件被触发了"); console.log("当前被触发的是innerBox事件") }; box.onclick...标签绑定一个单击响应事件，这种操作比较麻烦而且这种操作只能为已有的a标签绑定单击事件，新添加的超链接需要重新绑定 for(var i=0;i<allA.length;i++){ allA[i].onclick

1681 0

marquee 标签的使用详情

要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置。　　scrollLeft 和 scrollTop 属性当字幕滚动时为只读。...-- 单击此按钮可在字幕滚动时读取 scrollLeft 和 scrollTop 属性的值。...--> 　　onclick="alert('scrollLeft: ' + m1.scrollLeft + ' scrollRight: ' + m1.scrollTop)">读取...--> 　　onclick="m1.stop();m1.scrollLeft = 190;">停止并设置 scrollLeft=190 　　onclick="m1.start();">开始

3.1K3 0

点击加载更多

Scroll，你玩明白了嘛？

JavaScript基础②

前端实战项目·优雅实现 BackTop

scrollTop和scrollHeight「建议收藏」

JavaScript 基本知识

介绍一个页面平滑滚动小技巧

点击按钮，回到页面顶部的5种写法

Snapaper | 一个「伪」刷题网站的诞生

基于JS实现回到页面顶部的五种写法(从实现到增强)

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

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

关于IOS10系统内微信公众号地图的显示问题

说说几个 API 和应用案例

你也许不知道的浏览器的一些滚动行为

手机端网页使用html5地理定位获取位置失败的解决办法

scrollTop与offsetTop研究

前端学习(50)~事件的绑定和事件对象

三、jQuery属性操作

（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十五）：Event事件对象；移动爱心案例；Bubble事件冒泡；基于冒泡的事件委派处理

marquee 标签的使用详情

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐