平滑滚动

使界面平滑滚动到给定元素的指定坐标位置,可以使用scrollTo方法

语法

element.scrollTo(x-coord, y-coord)
// OR
element.scrollTo(options)

element指的是DOM节点元素,可以是windows,也可以通过document.getElementByxxx获取的节点

  • 传入两个参数
参数 x-coord y-coord
含义 沿x轴滚动的距离 沿y轴滚动的距离
  • 传入options参数

传入的options参数是一个ScrollToOptions对象,ScrollToOptions有三个属性,分别为top, left, behavior

属性 top left behavior
含义 沿y轴滚动的距离 沿x轴滚动的距离 滚动的方式,平滑滚动或者立即滚动到指定位置

ScrollToOptionsbehavior有三个值,分别为smooth, auto, instant

属性 smooth auto instant
含义 平滑滚动 立即跳动到指定位置 立即跳动到指定位置,同auto

案例

  • element.scrollTo(x-coord, y-coord)的使用

这里的ELement可以是Windows


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .div {
      
            width: 1600px;
            height: 2000px;
            background-color: #8aff1c;
        }
    style>
head>
<body>
<button id="btn">滚动button>
<div class="div">
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。p>
div>
<script>
let button = document.getElementById(`btn`);
button.addEventListener('click', () => {
      
    window.scrollTo(50, 50)
})
script>
body>
html>
  • element.scrollTo(options)的使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .div {
      
            width: 300px;
            height: 300px;
            background-color: #8aff1c;
            overflow: auto;
        }
    style>
head>
<body>
<button id="btn">滚动button>
<div class="div">
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
    <p>options 是一个ScrollToOptions对象。p>
div>
<script>
const button = document.getElementById(`btn`);
button.addEventListener('click', () => {
      
    const div = document.getElementsByClassName('div')[0]
    div.scrollTo({
      
        top: 150,
        behavior: 'smooth'
    })
})
script>
body>
html>

参考文章:

Element.scrollTo()

ScrollToOptions

你可能感兴趣的:(前端,JavaScript,javascript,html5)