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

Smooth scrollTop按钮onclick

是一个前端开发中常见的功能,用于实现页面平滑滚动到顶部的效果。当用户点击按钮时,页面会以平滑的动画效果滚动到页面顶部。

实现Smooth scrollTop按钮onclick功能的一种常见方法是使用JavaScript和CSS。以下是一个基本的实现示例:

HTML代码:

代码语言:txt
复制
<button onclick="smoothScrollTop()">Scroll to Top</button>

JavaScript代码:

代码语言:txt
复制
function smoothScrollTop() {
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 0) {
    window.requestAnimationFrame(smoothScrollTop);
    window.scrollTo(0, currentScroll - (currentScroll / 8));
  }
}

CSS代码:

代码语言:txt
复制
button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

button.show {
  display: block;
}

上述代码中,通过获取当前页面滚动的位置(document.documentElement.scrollTopdocument.body.scrollTop),然后使用window.scrollTo()方法实现平滑滚动效果。通过window.requestAnimationFrame()方法实现动画效果的流畅性。

为了更好地用户体验,可以使用CSS样式控制按钮的显示与隐藏。当页面滚动超过一定距离时,显示按钮;否则隐藏按钮。可以通过监听window对象的scroll事件来实现这一功能。

关于Smooth scrollTop按钮onclick的应用场景,它通常用于长页面中,方便用户快速返回页面顶部。在需要提供良好用户体验的网页或应用中,这个功能是非常常见的。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云前端开发服务:https://cloud.tencent.com/product/fe
  • 腾讯云云原生服务:https://cloud.tencent.com/product/tke
  • 腾讯云音视频处理服务:https://cloud.tencent.com/product/mps
  • 腾讯云人工智能服务:https://cloud.tencent.com/product/ai
  • 腾讯云物联网服务:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发服务:https://cloud.tencent.com/product/mob
  • 腾讯云存储服务:https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙服务:https://cloud.tencent.com/product/mu
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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.1K22
  • 前端 实战项目·优雅实现 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' }) 此方法简单高效

    58140

    JavaScript 基本知识

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

    2.3K10

    基于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

    5.4K21

    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

    15010

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

    或者利用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)的滚动行为

    3K20
    领券