79

我的网站有以下代码：

function clickMe() {
  var element = document.getElementById('about');
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
  });
}

这很好用，但我有一个固定的标题，所以当代码滚动到元素时，标题会挡住。

有没有办法进行偏移并使其平滑滚动？

4

12 回答 12

128

有没有办法进行偏移并使其平滑滚动？

#是的，但不是使用 scrollIntoView()

Element.scrollIntoView()的scrollIntoViewOptions不允许您使用偏移量。它仅在您想要滚动到元素的确切位置时才有用。

但是，您可以使用带有选项的Window.scrollTo()来滚动到偏移位置并平滑地滚动。

例如，如果您有一个高度为的标题，30px您可以执行以下操作：

function scrollToTargetAdjusted(){
    var element = document.getElementById('targetElement');
    var headerOffset = 45;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
  
    window.scrollTo({
         top: offsetPosition,
         behavior: "smooth"
    });
}

这将平滑滚动到您的元素，以便它不会被您的标题挡住。

注意：您减去偏移量是因为您想在将标题滚动到元素上之前停止。

#查看实际情况

您可以在下面的代码段中比较这两个选项。

<script type="text/javascript">
  function scrollToTarget() {

    var element = document.getElementById('targetElement');
    element.scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }

  function scrollToTargetAdjusted() {
        var element = document.getElementById('targetElement');
      var headerOffset = 45;
        var elementPosition = element.getBoundingClientRect().top;
      var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
      
      window.scrollTo({
          top: offsetPosition,
          behavior: "smooth"
      });   
  }

  function backToTop() {
    window.scrollTo(0, 0);
  }
</script>

<div id="header" style="height:30px; width:100%; position:fixed; background-color:lightblue; text-align:center;"> <b>Fixed Header</b></div>

<div id="mainContent" style="padding:30px 0px;">

  <button type="button" onclick="scrollToTarget();">element.scrollIntoView() smooth, header blocks view</button>
  <button type="button" onclick="scrollToTargetAdjusted();">window.scrollTo() smooth, with offset</button>

  <div style="height:1000px;"></div>
  <div id="targetElement" style="background-color:red;">Target</div>
  <br/>
  <button type="button" onclick="backToTop();">Back to top</button>
  <div style="height:1000px;"></div>
</div>

编辑

window.pageYOffset已添加，以解决与@coreyward 评论相关的问题

于 2018-04-16T15:23:26.190 回答
96

Søren D. Ptæus 的回答让我走上了正确的道路，但我getBoundingClientRect()在不在window.

我的解决方案为他的工作增加了一点点，以使getBoundingClientRect()工作更加一致，并具有更多的多功能性。我使用了此处概述的方法并实施了它以使其按预期工作。

const element = document.getElementById('targetElement');
const offset = 45;
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = element.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;

window.scrollTo({
  top: offsetPosition,
  behavior: 'smooth'
});

代码笔示例

请记住在实现时包含polyfill！

于 2018-04-19T15:11:11.207 回答
49

如果元素的高度很小（比视口短），则简单而优雅的解决方案：

element.scrollIntoView({ behavior: 'instant', block: 'center' });

将block: center滚动元素，使元素的中心位于视口的垂直中心，因此顶部标题不会覆盖它。

于 2019-11-17T09:21:57.333 回答
9

我尝试了其他解决方案，但我遇到了一些奇怪的行为。但是，这对我有用。

function scrollTo(id) {
    var element = document.getElementById(id);
    var headerOffset = 60;
    var elementPosition = element.offsetTop;
    var offsetPosition = elementPosition - headerOffset;
    document.documentElement.scrollTop = offsetPosition;
    document.body.scrollTop = offsetPosition; // For Safari
}

和风格：

html {
    scroll-behavior: smooth;
}
于 2019-04-21T17:07:53.723 回答
8

我知道这是一个 hack，绝对是你应该谨慎使用的东西，但你实际上可以在元素中添加一个padding和一个否定。margin我不能保证它对你有用，因为我没有你的标记和代码，但我有一个类似的问题并使用这个解决方法来解决它。

假设你的标题是30px并且你想要一个偏移量15px，那么：

  #about {
     padding-top: 45px; // this will allow you to scroll 15px below your 30px header
     margin-top: -45px; // and this will make sure that you don't change your layout because of it
  }
于 2020-03-06T14:28:45.113 回答
8

Søren D. Ptæus的几乎是正确的，但它仅在用户处于顶部时才有效。这是因为 getBoundingClientRect 将始终为我们提供相对高度，并且使用具有相对高度的 window.scrollTo 不起作用。

ekfuhrmann通过从 body 元素中获取总高度并计算实际高度来改进答案。但是，我认为它可以比这更容易，我们可以简单地使用相对位置并使用 window.scrollBy。

注意：关键区别在于 window.scrollBy

const HEADER_HEIGHT = 45;

function scrollToTargetAdjusted(){
    const element = document.getElementById('targetElement');
    const elementPosition = element.getBoundingClientRect().top;
    const offsetPosition = elementPosition - HEADER_HEIGHT;

    window.scrollBy({
         top: offsetPosition,
         behavior: "smooth"
    });
}
于 2021-05-22T09:19:00.173 回答
3

还有滚动边距和滚动填充。

对我来说，滚动填充对这类东西最有用。

/* Keyword values */
scroll-padding-top: auto;

/* <length> values */
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;

/* Global values */
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: unset;

此外，您可以通过将滚动行为设置为平滑来使用平滑滚动。

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: unset;

不过，它可能与 Internet Explorer 不兼容。

于 2021-04-14T18:39:25.350 回答
3

您可以scrollIntoView()在示例中使用 like

function clickMe() {
  var element = document.getElementById('about');
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
  });
}

如果您将scroll-margin标题的高度添加到目标元素（about）：

.about {
  scroll-margin: 100px;
}

不需要其他任何东西。所有现代浏览器scroll-margin都支持。

于 2021-11-11T20:24:27.757 回答
1

这是我根据@ekfuhrmann的回答编写的函数。
它将需要滚动到的元素作为第一个参数，将对象形式的其他选项作为第二个参数，类似于window.scrollTo()函数的工作原理。

function scrollToTarget(element, options) {
    if (options.headerHeight === undefined) {
        options.headerHeight = 0;
    }

    var elementRect = element.getBoundingClientRect();

    // If an element has 0 height, then it is hidden, do not scroll
    if (elementRect.height == 0) {
        return;
    }

    var offset = elementRect.top - options.headerHeight;

    if (options.block == 'center') {
        // If an element's height is smaller, than the available screen height (without the height of the header), then add the half of the available space
        // to scroll to the center of the screen
        var availableSpace = window.innerHeight - options.headerHeight;
        if (elementRect.height < availableSpace) {
            offset -= (availableSpace - elementRect.height) / 2;
        }
    }

    var optionsToPass = {
        top: offset
    };
    if (options.behavior !== undefined) {
        optionsToPass.behavior = options.behavior
    }

    window.scrollBy(optionsToPass);
}

主要区别在于它使用window.scrollBy()function 而不是window.scrollTo()，因此我们不需要调用.getBoundingClientRect()on body。

该options参数可以包含一个headerHeight字段 - 它可以包含屏幕上固定元素的高度，滚动到该元素时需要忽略该高度。

这个函数也可以有一个block选项，现在只能接受一个"center"值。设置后，滚动到的元素将出现在屏幕中央，不包括固定的元素高度。默认情况下，滚动将应用于元素的顶部。

使用示例

这里我们有两个位置固定的重叠元素。假设其中最大的一个在某些视口宽度上不可见，因此我们需要动态获取可用视口高度减去固定元素的高度。

下面的示例演示，如果block选项设置为，元素将出现在可用视口高度的中心"center"，类似于Element.scrollIntoView()函数的工作方式。

function scrollToTarget(element, options) {
    if (options.headerHeight === undefined) {
        options.headerHeight = 0;
    }

    var elementRect = element.getBoundingClientRect();

    if (elementRect.height == 0) {
        return;
    }

    var offset = elementRect.top - options.headerHeight;

    if (options.block == 'center') {
        var availableSpace = window.innerHeight - options.headerHeight;
        if (elementRect.height < availableSpace) {
            offset -= (availableSpace - elementRect.height) / 2;
        }
    }

    var optionsToPass = {
        top: offset
    };
    if (options.behavior !== undefined) {
        optionsToPass.behavior = options.behavior
    }

    window.scrollBy(optionsToPass);
}

var headerElements  = [
  document.querySelector('.header__wrap'),
  document.getElementById('wpadminbar')
];
var maxHeaderHeight = headerElements.reduce(function (max, item) {
  return item ? Math.max(max, item.offsetHeight) : max;
}, 0);

document.getElementById('click-me').addEventListener('click', function() {
  scrollToTarget(document.querySelector('.scroll-element'), {
    headerHeight: maxHeaderHeight,
    block: 'center',
    behavior: 'smooth'
  });
});
body {
  margin: 0;
  height: 1000px;
}
#wpadminbar, .header__wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
#wpadminbar {
  height: 32px;
  background-color: #1d2327;
  z-index: 2;
  opacity: 0.8;
}
.header__wrap {
  margin: 0 15px;
  height: 74px;
  background-color: #436c50;
  z-index: 1;
}
.scroll-element {
  margin-top: 500px;
  padding: 1em;
  text-align: center;
  background-color: #d7d7d7;
}
#click-me {
  margin: 100px auto 0;
  padding: 0.5em 1em;
  display: block;
}
<div id="wpadminbar"></div>
<div class="header__wrap"></div>
<button id="click-me">Click me!</button>
<!-- Some deeply nested HTML element -->
<div class="scroll-element">
  You scrolled to me and now I am in the visual center of the screen. Nice!
</div>

于 2021-04-14T18:25:54.553 回答
0

通过一个非常小的 hack，您可以使其与 scrollIntoView() 一起使用

  • 假设您要滚动到某个部分，并且您的元素采用以下格式：
<section id="about">
 <p>About title</p>
 <p>About description</p>
</section>

<section id="profile">
 <p>About title</p>
 <p>About description</p>
</section>
  • 您将上面的代码转换为：
<section>
 <span className="section-offset" id="about"></span>
 <!-- or <span className="section-offset" id="about" />  for React -->
 <p>About title</p>
 <p>About description</p>
</section>

<section>
 <span className="section-offset" id="profile"></span>
 <p>Profile title</p>
 <p>Profile description</p>
</section>
  • 然后在您的 CSS 中，您可以使用以下命令轻松更改偏移量：
.section-offset {
  position: relative;
  bottom: 60px; // <<< your offset here >>>
}

结论：

将元素选择器移动到section内的一个span，然后可以position: relative在span上使用（顶部/底部放置不会影响页面上的其他元素）来设置所需的偏移量。如果您需要底部偏移，请将span元素放在部分的末尾（例如：在 之前</section>）。

于 2021-06-01T10:46:53.523 回答
-1 

      let t=document.querySelector("body");
      
      document.addEventListener("keypress",(e)=>{
        if(e.key=="t"){
         t.scrollIntoView(true,{block:start,behaviour:smooth});
        }
        if(e.key=="b"){
       t.scrollIntoView(false,{block:start,behaviour:smooth});
       }
      });
<h1>Press t to go to top of the page <br />
      Press b to go to bottom of the page
    </h1>

    <h2 id="s1">Section 1</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi ipsum
      rem placeat ullam vero animi adipisci laboriosam libero quidem quisquam
      quam quae veniam, exercitationem aspernatur quaerat qui harum maiores
      tenetur vel magnam temporibus dolor modi deserunt. Excepturi nesciunt sint
      velit blanditiis provident modi voluptate, corrupti fugit est minima quae
      qui praesentium minus cupiditate aut! Ipsam voluptatum dolores hic quis
      excepturi, eveniet nobis nulla tenetur. Pariatur dolore dolorum nobis
      commodi, quo amet saepe quae magnam eius! Ex vero consectetur delectus
      aliquid! Minima culpa possimus dicta iste excepturi aut quia officiis
      reiciendis animi perspiciatis neque, deserunt minus beatae voluptates
      veritatis rerum tempore molestias reprehenderit dolorem suscipit
      repellendus esse non optio? Necessitatibus magni alias cumque repellendus
      blanditiis tempora incidunt beatae labore in explicabo illo enim nisi quos
      corrupti dolor adipisci ipsam, reprehenderit dolores vero. Labore ad, non
      quos nam reiciendis sapiente molestias nobis, facilis placeat voluptatibus
      perspiciatis dolorem voluptatem ipsum. Sint accusantium libero, fugiat
      quibusdam delectus quia nostrum minima sequi illo quidem magni rem ex et
      quasi ab error omnis eligendi odit repellat provident expedita
      perspiciatis iusto! Adipisci, molestiae! Eaque delectus molestiae facilis
      amet quis sed laudantium, quas ullam inventore ipsum nam adipisci hic?
      Magnam nulla culpa pariatur at. Rem alias, ducimus ea atque omnis culpa
      fuga, pariatur vel unde ad expedita in aliquid consequuntur excepturiuis 
      obcaecati sequi recusandae perferendis facere. Magnam voluptatibus
      asperiores ratione voluptate hic repellat reprehenderit sequi quisquam.
      Consequuntur quos, explicabo delectus beatae labore tenetur perspiciatis
      ipsum consequatur obcaecati sunt necessitatibus est dolorem vero odit
      exercitationem nam architecto itaque iusto fugit consectetur rerum
      laboriosam rem ducimus ad? Tempore, soluta eius id sed, expedita
      consectetur unde consequatur doloremque iure dolore enim molestias maiores
      commodi cum vitae aut aliquid, sapiente sit dicta assumenda quibusdam. Et,
      distinctio voluptatem voluptas omnis eaque qui sapiente dicta voluptate
      quos dolores vel magni inventore sunt quisquam ipsa recusandae eveniet
      quibusdam, saepe repudiandae itaque quia doloremque mollitia quis nobis!
      Sapiente dolorem quae fugiat deleniti molestias fuga odit eveniet
      voluptatibus nostrum beatae porro dolore soluta officiis, aspernatur,
      sequi est! Blanditiis velit et dolor, aut deserunt quod quasi totam! Ipsam
      perferendis culpa maxime! Aliquid quisquam delectus eum iste consectetur
      sit labore voluptas? Autem voluptatibus, excepturi numquam repellendus
      quaerat dolorem, obcaecati eum inventore qui similique odit, optio
      adipisci consequatur. Ullam sequi reiciendis harum in amet eligendi eum
      recusandae. Deleniti ullam facilis voluptatem blanditiis recusandae!
      Provident animi porro architecto earum sunt soluta voluptas eaque quaerat
      hic odio deleniti impedit velit qui alias corporis sed, obcaecati
      consequatur quo omnis sit et. Deleniti ea delectus non iusto expedita
      laborum, itaque nesciunt nisi inventore recusandae eveniet. Reprehenderit
      nesciunt fugit atque iste omnis error possimus molestias laudantium at,
      culpa natus amet qui dolore sint commodi adipisci repudiandae dignissimos
      voluptate provident illum quo! Iusto natus illum nisi harum dolore culpa,
      corrupti doloribus nesciunt sed consequatur animi adipisci ratione, odio
      soluta reiciendis veniam dicta dolores est et maiores eius nostrum totam
      quidem. Magnam aperiam nisi ut maxime aspernatur, autem dolorum cum, ex
      laborum temporibus, neque necessitatibus fugiat! Dignissimos corrupti
      doloribus voluptate nam deleniti saepe, dolor sit. Voluptatem autem
      reiciendis suscipit ut porro optio delectus dolores iusto, molestiae vel
      quos eaque esse, fugit facere. Amet quod distinctio, illum ullam possimus
      laborum aut explicabo eos tempore repellendus dolorem sunt tempora
      eligendi laboriosam sit temporibus aperiam similique. Accusantium labore
      eligendi animi adipisci magni, veritatis non libero! Asperiores doloribus
      fugit, fugiat distinctio consequatur tempora totam illo iste earum, unde
      accusantium enim similique! Quidem cupiditate culpa, dignissimos unde sint
      nihil fugit commodi nemo odio at facilis eveniet. Molestias vel neque id
      quas a delectus pariatur iure eaque vitae ea, deserunt laborum repellat,
      voluptatum beatae ducimus perspiciatis dolorem libero repellendus error
      possimus, alias maxime? Molestiae vitae iusto veniam quo et exercitationem
      eos suscipit tenetur incidunt eaque ducimus quaerat eum ex autem, quia
tate,
      libero reprehenderit molestiae numquam dolorem pariatur distinctio
      veritatis accusamus alias. Nisi iure quasi dicta repellat placeat, quis
      inventore? Doloribus, distinctio consequatur! Fuga deleniti placeat
      perspiciatis mollitia sequi labore cupiditate minus cum assumenda,
      quibusdam quia accusantium natus expedita porro quasi voluptatibus magni
      esse nihil illum id illo. Quos ipsa magni facilis sed distinctio cum
      aspernatur necessitatibus, voluptates temporibus officiis placeat qui
      saepe provident enim fugit voluptate minima repellat labore dolores, vero
      velit amet nesciunt esse? Delectus eligendi ullam accusamus consequatur
      blanditiis aspernatur maiores libero neque dolor quae fugit, alias
      repellat ex unde fuga est. Quibusdam pariatur rerum dicta similique
      facilis rem voluptatibus. Doloremque, quisquam similique! Odit incidunt
      quos illo ex voluptatibus, nam blanditiis rerum accusamus aperiam atque
ebitis
      deserunt? Eveniet et laboriosam velit provident quasi quaerat quibusdam
      eos, animi vel. Amet placeat velit, aspernatur voluptatem quidem
      reiciendis impedit totam fuga labore perspiciatis officia commodi repellat
      modi nisi. Aut asperiores ad repellat mollitia vel illum, sunt distinctio
      corrupti inventore quos hic quas facilis molestias unde minus dicta rem
      maiores eveniet soluta quia maxime iste provident nesciunt voluptatibus!
      Expedita, dolorum blanditiis magnam porro accusamus asperiores beatae ex
      molestias odit neque quo repellendus aperiam ea voluptate a enim iure
      numquam fugit tenetur! Harum accusantium molestias ipsa consectetur
      eligendi, deserunt praesentium ratione non aliquid quo recusandae quas
      libero distinctio dicta et, in quos doloribus sit labore vel cupiditate
      minima iste officia repudiandae. Nemo impedit sit itaque rerum soluta quos
      facilis praesentium alias illum necessitatibus cumque excepturi doloremque
      laboriosam dolorum blanditiis eos hic pariatur est debitis, maiores
      voluptatum nisi. Totam, soluta nesciunt pariatur, odio doloribus nobis
      error debitis enim facere cupiditate velit maxime earum itaque quibusdam
      voluptatibus modi ut, hic esse? Ex nobis neque itaque pariatur eius ab
      incidunt nisi ullam laboriosam quibusdam voluptatibus dolores suscipit,
      minus nostrum, deleniti iusto reiciendis. Accusamus iste est commodi
      accusantium delectus. Tenetur rerum maiores sed odit dolores. Odio
      assumenda dolorem maiores doloremque dicta aliquam rem enim numquam est
      voluptate sed corporis facere illo molestias sit at, minus reiciendis
      eaque repellat? Voluptates quo maxime eum quasi totam odit laborum
      molestiae sunt cupiditate numquam? Dignissimos similique reprehenderit,
      repellendus placeat, vel fugiat id labore nemo ab a explicabo itaque nisi
      saepe quidem magni impedit pariatur odio, et consectetur ducimus quos
      laborum voluptas vitae eveniet! Beatae doloremque omnis, hic accusantium
      explicabo quaerat obcaecati quae aspernatur illum natus, repellat
      perspiciatis et asperiores provident totam. Doloribus odio sequi, fugiat
      repudiandae minima soluta tempora vitae explicabo voluptas officia
      distinctio cupiditate adipisci unde. Aspernatur, inventore quasi.
      Quisquam, in fugiat doloribus vel omnis similique dolorem, inventore est
      esse eum perspiciatis minus vero molestiae explicabo delectus libero ab
      repudiandae? Est rem magnam exercitationem quia, quaerat excepturi
      voluptatibus provident asperiores eius qui molestias laborum nemo dolor
      officiis ab explicabo tempora tenetur nisi harum repellat consequatur
      doloremque. Vel, ut deserunt. Numquam alias labore officia nam modi,
      minus, temporibus voluptates libero doloribus quasi maxime similique
      magnam est atque, omnis doloremque nisi tempora eaque beatae velit! Rerum
      ipsum laborum, numquam nesciunt placeat recusandae corrupti neque at
      molestiae sint odit ipsam provident necessitatibus voluptate ipsa
      explicabo perferendis magni ab magnam praesentium voluptatum suscipit
      aperiam dolores. A explicabo cupiditate nostrum iusto distinctio
      voluptatum quam expedita, magni assumenda atque adipisci fuga pariatur,
      quod exercitationem aspernatur maiores corporis sequi, accusantium
      voluptas molestiae aliquid fugit eius tempora dolore. Assumenda sed
      accusantium quia quisquam necessitatibus officiis modi in, quos,
      laudantium maxime asperiores officia. Asperiores provident, nisi voluptate
      debitis praesentium quaerat amet temporibus hic tempora dignissimos,
      officia reprehenderit natus veniam nostrum blanditiis, numquam molestiae
      sit culpa consectetur facere aliquam adipisci! Nam, corrupti voluptatibus
      molestias placeat quo rem laboriosam magnam consectetur iste ullam
      sapiente distinctio error iusto id optio pariatur ea excepturi vitae?
      Magnam tempore mollitia ex necessitatibus? Numquam corporis, aliquam vitae
      porro consectetur doloribus tempora libero vero eos quibusdam distinctio
      ullam? Alias, ullam sequi minus debitis dolorum animi nulla fugit, eos ex,
      saepe at quibusdam libero odit repudiandae? Dignissimos, aut sint.
      Deserunt est error, provident, soluta fuga alias possimus molestias
      laborum quasi dolorum a. Nesciunt consequatur porro distinctio tenetur
      possimus, iure sit deserunt veniam omnis amet reiciendis. Temporibus odio
      recusandae delectus impedit totam consequatur beatae corrupti id esse
      repudiandae, sed ut saepe voluptatem nisi accusamus similique quisquam
      excepturi amet. Harum rem consequatur mollitia minima at vitae corporis
      quis cupiditate iste maiores praesentium dolorem culpa reprehenderit
      officiis, eaque voluptatum accusantium dolores natus asperiores odit vel
      neque. Fugit, sit error ipsa in alias atque numquam explicabo odio natus
      harum, id nam! Repellendus obcaecati illum doloribus facilis. Delectus
      voluptatem maxime nobis deserunt eius eaque magni voluptas tempora hic
      eveniet, laborum neque, minima, velit possimus. Assumenda consequatur quas
      consectetur rem labore aspernatur, esse quaerat, ipsum iure maxime autem
      necessitatibus veritatis similique suscipit impedit facere odio doloribus
      dolores incidunt laudantium. Quaerat doloremque vel velit impedit
      molestias consequuntur, provident animi officiis ipsam expedita suscipit.
      Laborum alias quas veniam. Quos deserunt sapiente ex doloremque, expedita
      architecto autem consequuntur. Commodi nobis voluptatibus cupiditate
      accusantium iure molestias repellat, cumque voluptate distinctio, eum modi
      voluptates, dignissimos illum molestiae eius magnam consectetur
      consequatur hic? Quo hic quod labore ex quisquam quos error nesciunt
      itaque cupiditate odit minus quasi dolorum non officiis doloremque,
      consequatur id rerum explicabo recusandae! Reiciendis accusamus
      consequatur corporis recusandae cupiditate libero illum aperiam.
      Similique, atque deserunt sequi, quis, est id libero earum iusto hic
      provident vel. Cupiditate, provident tempore voluptatum quibusdam id earum
      sequi mollitia vitae aliquid, soluta iure veritatis officiis ipsum
      incidunt non eum quos hic! Fugiat ut dicta dignissimos earum, alias iste
      officia quidem placeat nesciunt officiis et magni autem fuga voluptates
      temporibus porro numquam sint facilis dolorem aut aliquam ex tenetur
      reiciendis. Commodi at aperiam hic sequi, ratione perferendis a qui
      eligendi fuga optio nihil vel minus, facilis quos! Consectetur nesciunt
      corporis odit temporibus officia porro, numquam, ratione cupiditate,
      possimus deleniti nam. Dolorem blanditiis ad saepe odio dolorum veniam
      doloremque error in voluptates eos ea asperiores itaque, dicta dolor quasi
      nulla quis alias aliquid, nobis eveniet. Nam quam nisi architecto, eius
      magnam aut exercitationem aspernatur doloribus, iusto, fugit amet quod
      odio temporibus. Consectetur aspernatur ab voluptatem, in voluptatum
      excepturi magni hic non, itaque ad quisquam! Ex inventore repellat magni
      quaerat assumenda magnam adipisci consectetur sit explicabo officiis
      possimus optio, voluptas doloribus rerum, doloremque similique sapiente
      commodi. Eligendi ea porro, ad praesentium recusandae vitae laudantium
      sunt placeat numquam tempora rerum nobis, eum cumque magnam non.
      Aspernatur quae dolore nemo quasi saepe, id blanditiis repudiandae
      provident molestias rerum nesciunt similique quos eaque ab facere earum
      dolor illo ipsam? Debitis enim eius sint sequi dignissimos ipsa unde,
      natus repudiandae accusamus laborum iste esse, quod, non ex praesentium
      repellat ullam sapiente perferendis dolores? Impedit sequi consectetur
      velit pariatur facilis omnis perspiciatis odit officiis libero, optio
      delectus labore ullam unde a voluptate? Consectetur saepe sed harum fugit
      magnam accusamus labore ab repudiandae aperiam quae blanditiis pariatur a
      officiis ut esse eligendi amet veniam maiores architecto soluta magni,
      ipsam repellendus dolores? Dolor libero sapiente non officia ullam quis
      quas tenetur itaque laudantium consectetur fugiat deleniti repellat rem
      dicta, voluptatibus aspernatur omnis nesciunt facere explicabo,
      necessitatibus odio, sit ex recusandae? Praesentium illo quo tenetur vel
      iure ipsa consectetur. reprehenderit. Ea architecto autem nemo voluptatem
      aliquam deleniti ducimus unde?
    </p>

    <h2 id="s2">Section 2</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni vel
      voluptas debitis. Ipsa architecto aspernatur quaerat praesentium magni.
      Perspiciatis saepe molestiae esse consequuntur dolorem exercitationem
      asperiores sit, eos odio, est repellat veritatis voluptate modi.
      Consequatur eos a quisquam quidem illum, labore aliquid sunt voluptas
      mollitia saepe animi voluptate iure cum ducimus quaerat autem optio iste
      suscipit tempore. Iure recusandae nam necessitatibus autem ipsa nihil
  uos vero
      reiciendis voluptatum itaque iure sapiente iusto eaque ullam quis quas est
      laborum obcaecati aperiam cum ratione? Magnam sed nulla libero officia
      cupiditate voluptas consequatur! Fugit, provident molestias facere
      suscipit laborum aliquid repellendus voluptates tempora eos commodi dolore
      omnis odit et hic modi animi, dolorem obcaecati accusantium nihil eum
      delectus? Unde accusantium quasi magnam perspiciatis exercitationem
      cupiditate at molestiae doloribus, architecto illum corporis tempore
      dolores voluptas in explicabo culpa debitis alias, repudiandae natus?
      Provident cum rem ipsum. Ipsum odio dolorem eos id debitis repellendus
      placeat ratione tempore possimus voluptatibus error, ad deleniti
      perspiciatis vel cum quibusdam, voluptate, ipsam voluptates nam voluptas
      rem! Quo non expedita earum delectus temporibus, nostrum reiciendis alias
      commodi laboriosam optio iusto consectetur, sint culpa minus ea cupiditate
      distinctio voluptatem nisi deserunt! Illum eveniet quia aperiam dicta
      enim. Quia illo non at! Eaque vel repellat, unde minima rem temporibus
      sint quisquam, ipsum, modi ex blanditiis. Molestiae sit molestias ex
      animi, officia aut, excepturi porro rem pariatur, ipsam ea recusandae
      corporis quaerat alias dignissimos odit similique. Cum tenetur est neque
      sed quis aperiam sapiente possimus adipisci nam, magni repellendus minus
      id incidunt! Ipsa at tempore repellat incidunt tenetur quaerat provident!
      Reiciendis odio at itaque nam! Quidem modi, distinctio excepturi nam
      molestias quas, necessitatibus ad, iure error a nulla quae repellat ipsa
      aliquam. Unde voluptatibus distinctio impedit. Porro, provident
      repellendus ipsam voluptates veniam non laboriosam molestiae amet
      accusantium consequatur illo necessitatibus quo officiis sapiente eligendi
      rem iusto qui unde, illum, recusandae quod! Magnam eaque optio deserunt
      officia quibusdam magni cumque dolor atque placeat cum consectetur vel
      quam modi a voluptate obcaecati expedita, nulla itaque neque incidunt
      totam, perspiciatis dicta minus! Voluptas error blanditiis corrupti
      mollitia dolorem, illo dicta aliquid officiis tempora iste nulla facere,
      quo hic! Reprehenderit ea facere labore voluptates dolore accusamus
      ducimus placeat distinctio. Illum tempora labore obcaecati! Repudiandae,
      at maxime perspiciatis ex, totam maiores deserunt a quibusdam dolores
      cumque, cum facere! Esse nemo tempora impedit iure sapiente eligendi non
      excepturi, reiciendis praesentium autem a architecto alias maiores totam
      mollitia minima atque facilis quas! Perferendis vero corporis explicabo
      autem mollitia esse beatae dignissimos error cumque assumenda tenetur
      commodi, animi dolorem necessitatibus sapiente. Qui magnam adipisci
      inventore repellendus consequatur tempore eveniet unde. Doloribus, officia
      quasi et aperiam quidem sapiente asperiores iusto? Magnam, in sed?
      Provident atque omnis temporibus voluptate? Maxime nesciunt nisi debitis.
      Quo veniam corrupti itaque, vitae quae debitis? Adipisci ipsam voluptates
      dolores mollitia nesciunt reiciendis error provident laboriosam? Officia
      tempora alias numquam est asperiores modi veritatis et reiciendis nisi ut
      corporis quam, odit deserunt omnis odio ad iure maxime explicabo aut
      aliquam, rem adipisci exercitationem sunt! Fuga officiis, tempore,
      doloribus rerum esse alias dolores nam, cupiditate vero non aperiam
      praesentium perferendis ipsam voluptatem saepe exercitationem! Adipisci
      quaerat delectus, quia magni provident commodi in sint quod inventore
      explicabo! Repudiandae, veritatis dolorem obcaecati non possimus
      cupiditate eos dolorum veniam commodi dignissimos esse blanditiis repellat
      tempore impedit ex fugit incidunt autem, quo culpa minus! Quisquam
      reprehenderit error esse excepturi, similique tempora quas quis. Facere
      magnam quae earum hic numquam dignissimos quia exercitationem impedit
      blanditiis cum soluta deleniti nobis cumque suscipit possimus placeat
      iusto asperiores, perferendis fuga consectetur nesciunt ipsum fugit!
      Fuipit.
      Praesentium pariatur dolores vitae dicta optio error, consectetur, ex
      earum obcaecati exercitationem est, facilis nesciunt perferendis odit unde
      quia corporis voluptates consequatur veniam recusandae ducimus eum ea
      nihil. Natus nostrum illo eaque veniam. Ex itaque esse tempore quam.
      Labore, excepturi vitae. Nobis totam minus officiis perspiciatis corrupti
      ipsa, nemo ipsum numquam in adipisci! Amet molestias doloribus velit ea,
      natus, sint optio dolores autem, earum nesciunt aliquid inventore
      pariatur? Eos perspiciatis error veritatis quod pariatur non quisquam,
      harum magnam saepe nihil soluta dolor laudantium, commodi eaque adipisci.
      Deleniti laudantium omnis, provident odio eius ad officiis consequuntur
      possimus id iusto sed velit! Ducimus dicta eius illo molestiae veniam
      esse. Magni, explicabo adipisci excepturi illo quo molestiae ullam iste.
      Eum alias, enim voluptatum beatae neque culpa ducimus repellendus dolore
      illum perspiciatis ipsa consequatur fuga necessitatibus exercitationem,
      rem minima, qui iure molestias nihil nulla explicabo cumque nemo esse
      deserunt? Dignissimos aperiam accusamus quae deleniti voluptate laboriosam
      iure o
      expedita cumque laboriosam quibusdam dolorem consectetur eveniet!
      Excepturi perspiciatis odit provident earum similique possimus a, esse
      voluptatum in, sint et modi, dolorum molestias quasi vitae ea blanditiis
      tempore quam soluta atque saepe. Necessitatibus, a. Nihil porro est
      quaerat suscipit omnis praesentium explicabo fugiat distinctio, quis et
      ipsum veniam ab animi illo dolore eum nostrum, unde nesciunt. Optio
      officia tempora natus unde, harum neque deserunt est nobis, reprehenderit
      praesentium illo iure cumque corrupti saepe asperiores! Harum sequi quos
      atque soluta mollitia tempora error veritatis, perspiciatis repellendutate
      porro atque aliquid est deleniti voluptates odit provident ratione veniam
      consequuntur ex ipsum dolore, dolorum illum hic similique fugit sed
      doloribus dicta doloremque sint labore explicabo. Hic, consequuntur ipsum!
      Ducimus minima quia dicta maiores ea quis, in suscipit magni animi
      laudantium mollitia excepturi recusandae soluta rerum consequatur,
      eligendi obcaecati officia? Quibusdam ipsam ab, numquam enim molestias
      perferendis assumenda in ea ad eos at, nobis pariatur facere eum odit
      minima! Eaque, dolor eos voluptas excepturi harum dicta magni aspernatur
      consequatur deserunt rerum dolorum illum, nihil ad pariatur quidem nostrum
      sunt. Distinctio assumenda dolorum, soluta veritatis explicabo accusantium
      mollitia! Ratione dolores molestias vitae? Libero fuga ut possimus nobis
      magnam voluptates distinctio? Facere illo illum natus doloremque est
      dolorem saepe, molestias quaerat aspernatur sapiente? Nihil maxime iste
      placeat id voluptatem possimus eum doloremque ipsum aperiam rem, quo
      quidem voluptatibus sint quae cum dolorem, culpa nemo. Tempora veniam
      facilis provident nisi officiis, iure, dolore vero porro distinctio quam
      asperiores modi consequatur eveniet quod, velit accusamus minus ea. Sunt
      illum quo ullam consequuntur, sequi quia quidem repellat rem sed
      dignissimos accusamus assumenda vel libero esse odit natus nihil itaque.
      Beatae quibusdam earum, nulla odit eveniet aperiam libero esse tempore?
      Ullam recusandae, maiores quaerat id dolores nobis? Exercitationem
      molestias voluptatem nemo, itaque minus quam et ullam illo nihil quod
      amet, debitis magnam vitae sed. Quos delectus quam est reiciendis tempore,
      non, magni magnam laudantium aliquam sequi quis blanditiis nobis quibusdam
      repellendus quia deleniti tempora nesciunt expedita velit natus
      perferendis iure ipsum quae! At ut fugiat debitis exercitationem ducimus
      voluptatibus vero provident! Nesciunt, adipisci! Nisi minima laudantium
      quisquam, nostrum temporibus harum laboriosam velit ea non ut architecto?
      Culpa maxime quia possimus quibusdam accusamus impedit beatae quis nisi a
      atque consequuntur deleniti, distinctio neque? Nulla consectetur quibusdam
      quos odio accusantium rerum ut sapiente voluptatum aliquid tempora itaque
      debitis exercitationem voluptates dolor quaerat, explicabo facere nostrum
      obcaecati delectus neque. Nemo, aliquam corrupti optio in ea nulla vel,
      ducimus, nobis hic veritatis temporibus? Excepturi laborum placeat
      explicab
      architecto rerum blanditiis harum. Fugit labore blanditiis quam, delectus
      voluptas similique nulla doloremque maxime sit est eligendi pariatur
      incidunt in sit sint culpa voluptate aut assumenda debitis autem deleniti?
      Quia quam qui ipsam ic ab veniam itaque
      fuga saepe similique eaque ullam tenetur distinctio, enim, alias quia amet
      temporibus dicta, consequuntur mollitia.
    </p>

    <h2 id="s3">Section 3</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, animi
      eos. Dolores porro dolore, nulla maiores reprehenderit neque, culpa, eaque
      quos minus iusto ducimus autem ex consequatur. Minus, maxime atque
      exercitationem excepturi, soluta facilis quidem doloribus, impedit earum
      molestias molestiae voluptatem voluptatibus odio. Asperiores suscipit eos
      non maiores. Atque aspernatur quidem omnis, aut aperiam id perferendis
      incidunt cum! Veritatis, aut nostrum quisquam quae nobis unde? Sint quos
      illo facilis ex ab! Officiis enim aut nihil laborum adipisci alias a qui,
      debi
      nissimos? Odio, possimus ullam! Unde enim debitis, vero voluptatum,
      iusto, iste consequatur exercitationem natus sequi et doloribus. Repellat
      tenetur hic autem excepturi iste eligendi laborum temporibus dolore,
      quibusdam dicta asperiores itaque sed cumque eum dolor sunt? Molestias
      quaerat aliquid, eligendi inventore, hic veniam maiores quasi, minima
      quibusdam dolorum quidem facere. Consequuntur quidem repellat numquam
      ratione nesciunt voluptatum, qui, sapiente placeat nihil, dolorem culpa
      beatae alias neque. At quia, magnam itaque obcaecati amet aspernatur
      maxime hic nihil omnis adipisci mollitia harum veritatis, voluptate totam
      voluptas, quas perspiciatis fugit unde. Quaerat quos eius, amet ea quam
      maiores consectetur perferendis ipsam animi aut, molestiae iure!
    </p>

于 2021-06-17T19:06:12.527 回答
-1 
elementRef.current!.scrollIntoView({ 
     behavior: 'smooth', 
     block: 'center' 
})
于 2022-01-13T14:20:11.060 回答