节点平滑滚动

最新推荐文章于 2024-10-01 23:46:18 发布

江逸寒

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量60

点赞数

文章标签： html Powered by 金山文档

原文链接：https://juejin.cn/post/6946565514101522446

版权

使用JavaScript的scrollTo方法可以指定元素在Y轴和X轴上的滚动位置。通过设置behavior参数为smooth，可以实现平滑滚动效果，而instant则表示瞬间跳转。在示例中，元素id为right_pic将平滑滚动到其滚动高度的底部。

摘要由CSDN通过智能技术生成

top: 指定 window 或元素 Y 轴方向滚动的像素数。

left: 指定 window 或元素 X 轴方向滚动的像素数。

behavior: 指定滚动是否应该平滑进行，还是立即跳到指定位置。支持参数 smooth(平滑滚动), instant(瞬间滚动),默认值 auto（同instant）

document.getElementById('right_pic').scrollTo({
    top: document.getElementById('right_pic').scrollHeight,
    behavior: 'smooth'
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

江逸寒

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

滚动具体的元素节点

phpfzh的博客

11-22

208

document.getElementById("box").children[4].scrollIntoView(true); //offsetWidth/Height border+padding+width //clientWidth/Height: padding+width //offsetLeft offsetTop offsetParent 获取每一个元素初始化

js节点和无缝滚动

lwg910919an的博客

01-11

367

节点的增删改复制的操作用到的方法和属性 1、获取某个节点的父节点 parentNode属性 2、获取某个节点的子节点集合 childNodes属性 3、创建一个新的节点 createTextNode（节点文本内容）document对象的方法在某些浏览器上兼容性不是很好 createElemen（对象）document对象的

参与评论您还未登录，请先登录后发表或查看评论

偷得浮生半日闲

10-22

2471

当网页有文章，文章中有很多标题。我们有时会需要生成目录大纲，以便他人查阅。生成目录到是不难，但是怎么实现目录跟随着页面滚动而改变目录的高亮标题？

让滚动条滚动到正好显示某个节点的位置

canlynetsky的博客

11-24

8503

在做web版聊天软件时，有一个需求：如果向上拖动滚动条到顶部，就会加载更多历史记录（微信、QQ都是如此），历史记录逐条追加到顶端，这时看到的是最后的那条历史记录，但我们需要让用户看到的应该是第一条历史记录，这就需要将滚动条滚动到历史记录的第一条。比如历史记录有3条，第一条发送时间是2017年11月24日18点30分30秒，第二条是18点25分，第三条是17点，因为聊天记录是按时间顺序排列的，顶端

js平滑滚动元素使其可见

ACBC12345的博客

06-06

525

js平滑滚动元素使其可见

记录锚点定位平滑滚动的实现

qq_33079391的博客

03-18

914

vue实现点击某个商品, 会跳转到商品所在的店铺页面, 并平滑滚动到指定商品的位置。跟锚点定位差不多一样的实现, 前提: 每个商品有特点标识, 如foodId. :id="foodId" -------------------------------------------------------------------------------------------------------...

平滑滚动到一个元素

lio-zero 的博客

02-11

339

我们可以通过传递 behavior: smooth 平滑滚动到给定元素： ele.scrollIntoView({ behavior: 'smooth' }) 或将 CSS 属性滚动行为应用于目标元素： scroll-behavior: smooth; 这两种方法我们之前介绍过，详细内容请查看滚动到页面顶部的多种实现。 IE 和 Safari 中不支持这两种方法，并且不允许自定义动画。这篇文...

vue实现平滑滚动到顶部

qq_30228701的博客

10-11

438

1、HTML <a href="javascript:void(0)" id="top" @click="backTop" class="toolbar-item toolbar-item-top"></a> 2、JS export default { data () { return { } }, methods: { backTop () { window.scrollTo({ top: 0, be

vue 滚动条平滑滚动到某个位置

qq_29715077的博客

04-27

1904

window.scrollTo({ //滚动到元素位置 //top: this.$refs[元素].offsetTop,//offsetTop 相对于offsetparent 定位,当有定位时，不准确。 top: this.$refs[元素].getBoundingClientRect().top + window.scrollY,//推荐使用，getBoundingClientRect 相对于当前视口的位置 //top: 400//滚动到指定距离 //top: 0.

主角移动与地图平滑滚动

08-25

在游戏开发中，主角移动与地图平滑滚动是至关重要的技术环节，特别是在2D横版卷轴或俯视角的游戏设计中。这一技术让玩家能够体验到流畅、无缝的游戏世界探索。下面将详细介绍如何实现这一功能。首先，我们要理解...

vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

12-29

vue项目中，需要实现点击对应按钮，滚动到对应页面位置，下面分享一个简单实用的方法原文地址 http://www.sharedblog.cn/?post=205 (1)>按钮一 (2)>按钮二 (3)>按钮三 (4)>按钮四 <span @click=

react 实现滚动加载_在React中实现平滑滚动

最新发布

m0_74124657的博客

10-01

665

目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行行内元素：共享一行行内元素与块级元素的转换3是否有结束标签常用标签1 标题标签：有六级我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签：添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接：内容 1 访问同目录下的网页2 访问外部网页3 访问本地网页7 标签， 8 表

HTML粉色烟花秀

兔子王

09-21

8244

HTML语言实现的粉红色跨年烟花秀的完整代码。

【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论

mengran_code的博客

09-29

571

简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。

关于HTML 案例_个人简历展示02

Dingyuan0的博客

09-29

1044

展示效果用table进行布局 label 标签进行关联例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

好玩的水表电表

lulei5153的博客

10-01

427

【代码】好玩的水表电表。

el-tree新增节点滚动到新增的节点

07-10

在Element UI的`el-tree`组件中，如果你需要实现当动态添加新节点...在这个例子中，`behavior: 'smooth'`是可选的，如果希望有平滑滚动的效果，可以设置它；如果没有特别需求，默认的滚动行为就是直接定位到目标节点。