JavaScript scrollIntoView smooth scroll and offset

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?

> 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 + window.pageYOffset - 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 + 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>

Edit

window.pageYOffset have being added, to fix the problem related to @coreyward comments

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!

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

element.scrollIntoView({ behavior: 'auto' /*or smooth*/, 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.

EDIT 8.5.22: behavior: instant was used in the past, but removed from browsers.

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

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
  }

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

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.

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;

Additionally, you can use smooth-scroll by setting scroll behaviour to smooth.

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

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

It's likely not Internet Explorer compatible, though.

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>

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

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

      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?

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