首页 > 其他分享 >快速滚动到顶部和底部的js方法

快速滚动到顶部和底部的js方法

时间:2022-12-23 17:55:15浏览次数:44  
标签:滚动 顶部 smooth element behavior js block

// 平滑的滚动到底部
const scrollToBottom = (element) => 
  element.scrollIntoView({ behavior: "smooth", block: "end" });

// 平滑的滚动到顶部
const scrollToTop = (element) => 
  element.scrollIntoView({ behavior: "smooth", block: "start" });
behavior: "smooth" 平滑,
block:"start" | "end" :顶部 或者 底部
 

标签:滚动,顶部,smooth,element,behavior,js,block
From: https://www.cnblogs.com/grow-up-up/p/17001249.html

相关文章

  • 使用PM2将egg.js部署到服务上
    使用PM2将egg.js部署到服务上服务器安装环境Node.jsPM2pm2部署步骤npminstallpm2-gegg.js部署步骤npminitegg--type=simple修改默认端口找到config目录下的conf......
  • js:Object对象按照key的升序排序
    思路:js的Object对象类型,不能直接排序,不过Array是可以排序的将Object类型的key,转为Array排序,再将结果转为Object示例letdata={name:"tom",age:20,};consol......
  • js大文件上传详解及实例代码
    ​4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很......
  • 打字效果 Typed.js
    cnpminstallvue-typed-js<vue-typed-jsclass="desc":strings="typingTexts":loop="true":startDelay="300":typeSpeed="100":backSpeed="50">......
  • nextJs---Image组件自适应父元素
    <divstyle={{flex:'1.3',marginRight:'10px',posit......
  • Go-19 Golang结构体和JSON相互序列化和反序列化
    packagemainimport( "encoding/json" "fmt")//Golang结构体和Json相互转换 序列化和反序列化typeStudentstruct{ IDint Genderstring namestri......
  • 页面滚动 动画
     VueScrollRevealdelay:0,//延迟distance:'0px',//相对于原出现位置的距离duration:600,//动画多长时间完成easing:'cubic-bezier(0.5,0,......
  • SpringBoot2.x系列教程17--Web开发03之支持jsp
    SpringBoot系列教程17--Web开发03之支持jsp作者:一一哥咱们都知道,在SpringMVC中是支持JSP的,但是在SpringBoot中,其实不建议使用JSP。因为在使用嵌入式servlet容器时,有一些......
  • 解决SpringBoot中无法访问js、css、img等静态资源的问题
    解决SpringBoot中无法访问js、css、img等静态资源的问题一.异常问题我一开始在SpringBoot中的resources/static/目录下创建了easeui、layui等静态资源目录,然后在html文件中......
  • @JsonInclude @JsonFormat 注解
    1.使用@JsonInclude(JsonInclude.Include.NON_NULL)注解可以返回制定格式的json数据:如果属性返回值为空,则不返回任何内容,这是由于@JsonInclude(JsonInclude.Include.N......