JavaScript scrollIntoView 平滑滚动和偏移

Question

I have this code for my website:

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

This works pretty nice but I have a fixed header so when the code scrolls to the element the header is in the way.

Is there a way to have an offset and make it scroll smoothly?

Answer 1

Is there a way to have an offset and make it scroll smoothly?

Yes, but not with scrollIntoView()

The scrollIntoViewOptions of Element.scrollIntoView() do not allow you to use an offset. It is solely useful when you want to scroll to the exact position of the element.

You can however use Window.scrollTo() with options to both scroll to an offset position and to do so smoothly .

If you have a header with a height of 30px for example you might do the following:

function scrollToTargetAdjusted(){
    var element = document.getElementById('targetElement');
    var headerOffset = 45;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition - headerOffset;

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

This will smoothly scroll to your element just so that it is not blocked from view by your header.

Note : You substract the offset because you want to stop before you scroll your header over your element.

See it in action

You can compare both options in the snippet below.

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

Answer 2

Søren D. Ptæus's answer got me on the right track but I had issues with getBoundingClientRect() when not at the top of the window .

My solution adds a bit more to his to get getBoundingClientRect() working a bit more consistently with more versatility. I used the approach outlined here and implemented it to get this working as intended.

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'
});

Codepen Example

Remember to include the polyfill when implementing this!

Answer 3

Simple but elegant solution if the element has a small height (shorter than the viewport):

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

The block: center will scroll the element so the center of the element is at the vertical center of the viewport, so the top header will not cover it.

Answer 4

I tried the other solutions, but I was getting some strange behavior. However, this worked for me.

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
}

and the style:

html {
    scroll-behavior: smooth;
}

Answer 5

Søren D. Ptæus 's is almost right, but it only works when the user is on top. This is because getBoundingClientRect will always get us the relative height and using window.scrollTo with a relative height doesn't work.

ekfuhrmann improved the answer by getting the total height from the body element and calculating the real height. However, I think it can be easier than that, we can simply use the relative position and use window.scrollBy.

Note: Key difference is 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"
    });
}

Answer 6

I know this is a hack and definitely is something that you should use with caution, but you can actually add a padding and a negative margin to the element. I cannot guarantee that it would work for you as I don't have your markup and code, but I had a similar issue and used this workaround to solve it.

Say your header is 30px and you want an offset of 15px , then:

  #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
  }

Answer 7

Here is the function that I wrote based on the @ekfuhrmann 's answer .
It takes the element that needs to be scrolled to as the first parameter and other options in the form of the object as the second parameter, similar to how the window.scrollTo() function works.

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);
}

The main difference is that it uses window.scrollBy() function instead of window.scrollTo() , so that we don't need to call .getBoundingClientRect() on body .

The options parameter can contain a headerHeight field - it can contain the height of the fixed element on the screen, that needs to be ignored when scrolling to the element.

This function can also have a block option, that for now can only accept a single "center" value. When set, the element which is scrolled to will appear in the center of the screen excluding the fixed element height. By default, the scroll will be applied to the element's top.

Usage example

Here we have two overlapping elements with fixed position. Let's imagine the largest of them is not visible on some viewport widths, so we need to dynamically get the available viewport height minus the height of fixed element.

The following example demonstrates, that the element will appear in the center of the available viewport height if the block option is set to "center" , similar to how the Element.scrollIntoView() function works.

 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>

Answer 8

There is also scroll-margin and scroll-padding.

For me scroll-padding is most useful for this kind of stuff.

• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top

• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

/* 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;

Its likely not Internet Explorer compatible though.

Answer 9

With a very small hack you can make it work with scrollIntoView()

• Let's say you want to scroll to a section and your elements are in this format:

<section id="about">
 <p>About title</p>
 <p>About description</p>
</section>

<section id="profile">
 <p>About title</p>
 <p>About description</p>
</section>

• You convert the above code into this:

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

• Then in your css you can easily change the offset by using:

.section-offset {
  position: relative;
  bottom: 60px; // <<< your offset here >>>
}

Conclusion:

Move the element selector to a span inside the section, then you can use position: relative on the span (top/bottom placement does not affect other elements on the page) to set the needed offset. If you need bottom offset, place the span element at the end of your section (ex: before the </section> ).

Answer 10

You can use scrollIntoView() like in your example

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

if you add scroll-margin with the height of the header to the target element ( about ):

.about {
  scroll-margin: 100px;
}

Nothing else is needed. scroll-margin is supported by all modern browsers .

Answer 11

Come across this question and seems scrollBy provides the best flexibility. This is just a minimalistic version based on @yangli-io answer to save you some time and cleaner code.

function scrollIntoViewAdjusted(elem, offset=0){
  window.scrollBy({
    top: elem.getBoundingClientRect().top - offset,
    behavior: "smooth"
  });
}

Answer 12

to prevent any element from intersecting with fixed top. there are actually many ways to do that. recently I use scroll-padding-top in CSS file.

* {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* this pixel should match fixed header height */
  }

what do you mean scroll smoothly? just add scroll-behavior: smooth; in CSS.

if what want is to open a new page and then scroll smoothly, then that's a different approach. you can check my answer for this here

if what you looking for is to check if the element is in the viewport or not, then that's another story. I'm not sure which one you are looking for. if it's this one, please confirm and I will spend more time summarizing the answer for you. I had this issue and I finally solved it.

Answer 13

 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>

Answer 14

elementRef.current!.scrollIntoView({ 
     behavior: 'smooth', 
     block: 'center' 
})