Develop Reference

Use browser same page jump link functionality with offset

I want to use the same browser URL hash functionality but with offset based on the height of the sticky header. Currently, content goes behind header.
Here is the link to jsfiddle: https://jsfiddle.net/rmyafjt7/13/
The Javascript solution I tried but not working:
const targetJumplinkWrapName = e.target.getAttribute("href").split("#")[1]; // returns destination element id name
const element = document.getElementById(targetJumplinkWrapName);
const elementTop = element.offsetTop + window.innerHeight - 250;
window.scrollTo({ top: elementTop, behavior: 'smooth' });

I believe the brute-force solution is adding a "scroll-margin-top" to the "jumplink-wrap" class such as:
.jumplink-wrap{scroll-margin-top:60px;}
where 60px is the header height in the jsfiddle given.

you can use the :target pseudo element
* {
margin: 0
}
header {
width: 100%;
height: 60px;
color: #fff;
border-bottom: 2px solid #000;
position: fixed;
text-align: center;
background: green
}
.nav {
padding-top: 70px
}
.jumplink-wrap:target::before {
content: "";
display: block;
/* Your header height */
height: 60px;
margin: -60px 0 0;
}
<header>HEADER</header>
<nav class="nav" id="jumpNav">
<ul>
<li class="" data-id="introduction">Introduction</li>
<li data-id="aut_ducimus" class="active">Aut ducimus</li>
<li data-id="sit_inventore_debitis" class="">Sit inventore debitis</li>
<li data-id="et_corrupti" class="">Et corrupti</li>
</ul>
</nav>
<div class="article-content">
<div class="jumplink-wrap" id="introduction"></div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<div class="jumplink-wrap" id="aut_ducimus">
<h2>Aut ducimus</h2>
</div>
<p>Lorem ipsum dolor sit amet. In sint quos vel cupiditate nemo At unde quasi. Non minima molestiae sit dolorem nostrum eum odit nihil vel nobis tempore sit voluptatibus dolorem. Non accusantium voluptate qui error iste ut pariatur repudiandae At molestias obcaecati aut ipsa debitis. Sit ipsam dicta est ipsa iste et minus voluptatibus et autem saepe et repudiandae nostrum.</p>
<p>A porro quibusdam ut eaque blanditiis et esse voluptates. Sed harum vitae et quia iste id laudantium minus et possimus dolorum ut officia neque eos recusandae atque est perferendis expedita? Eum nesciunt omnis id voluptatem excepturi qui quasi libero eos eligendi omnis et numquam aperiam ut illum inventore est debitis voluptas. Et sint quia aut esse temporibus hic voluptas dolores est voluptatem delectus At omnis fugiat eum nihil doloribus.</p>
<p>Sit quis distinctio ut rerum libero et asperiores repellendus vel accusantium voluptatibus quo culpa magnam eum voluptatem nihil est possimus iusto. Et natus quos eum molestiae officiis non minus dolorem est sint ducimus. Eum mollitia dolorem ut deserunt natus ea unde nihil.</p>
<div class="jumplink-wrap" id="sit_inventore_debitis">
<h2>Sit inventore debitis</h2>
</div>
<p>Lorem ipsum dolor sit amet. Et voluptatem nobis vel deleniti distinctio et placeat consequuntur qui aliquid quisquam ex quia vitae. Sed cumque nostrum in velit necessitatibus vel quia quod ut magni optio est quam aperiam non omnis illum.</p>
<p>Id illum vitae a facere soluta ut fugiat nostrum. Non sunt dolor ut soluta nihil est placeat repellendus ab amet animi sit dolorem temporibus! Est voluptatem itaque eos eveniet deleniti qui voluptas facilis et voluptatem doloremque et magnam amet est sequi quod.</p>
<div class="jumplink-wrap" id="et_corrupti">
<h2>Et corrupti</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id nihil repellendus sit dolor excepturi quo aspernatur voluptates eum repellat voluptate. Est obcaecati veritatis ut explicabo veritatis ut delectus quia ad accusamus dolore ut optio consequatur et rerum tenetur qui quibusdam eligendi.</p>
<p>Rem recusandae aliquid est deserunt Quis aut unde nihil ea aliquam quisquam vel tempora quibusdam et autem nemo. At magnam consequatur et reiciendis eligendi sit exercitationem voluptate ut dolorem harum est doloremque repellendus cum beatae rerum. Et provident sint sed beatae molestiae eos quas distinctio. Est voluptates commodi vel voluptatibus praesentium est sint saepe id quae amet et illum quam qui cupiditate voluptatibus.</p>
<p>Aut numquam officia et doloremque praesentium et dolorum molestiae in illo nulla sed quos reprehenderit est fuga dolorem sed quaerat blanditiis. Et voluptates consequatur sed cumque deserunt vel asperiores nulla est ducimus tempora id quia sapiente ex repudiandae voluptatem 33 quaerat molestias.</p>
<p>Non ipsam reiciendis non nulla aliquam est voluptate veniam qui dolor blanditiis? Ea internos distinctio vel eligendi veniam sit assumenda nesciunt eum eius quos cum aperiam autem eum quibusdam eius.</p>
<p>In fuga quia a praesentium accusamus sit dolores consectetur. Est nobis nostrum ut vitae labore aut odio voluptatibus sit laboriosam expedita aut voluptas voluptatibus aut quia saepe ut recusandae unde.</p>
<p>Vel soluta rerum At rerum maxime aut aperiam neque aut enim voluptatibus qui laborum delectus ea sunt repellendus. Et quia voluptatibus eum reprehenderit molestias vel amet sunt. Et quisquam ullam eum illum nisi in aliquid recusandae et quam corrupti. Aut architecto dolor sit iure consequatur in nihil saepe ut consequatur consequatur.</p>

working perfectly, write a script for you. please have a look
const links = document.querySelectorAll('#jumpNav a')
for (const element of links) {
element.addEventListener('click', smoothScroll);
}
function smoothScroll(e) {
e.preventDefault();
const hash = e.target.hash;
const headerHeight = document.querySelector('header').offsetHeight;;
const elementOffset = document.querySelector(`${hash}`).offsetTop;
const hashOffsetTop = (elementOffset - headerHeight);
window.scrollTo({ top: hashOffsetTop, behavior: 'smooth' });
}
* {
margin: 0
}
header {
width: 100%;
height: 60px;
color: #fff;
border-bottom: 2px solid #000;
position: fixed;
text-align: center;
background: green
}
.nav {
padding-top: 70px
}
<header>HEADER</header>
<nav class="nav" id="jumpNav">
<ul>
<li class="" data-id="introduction">Introduction</li>
<li data-id="aut_ducimus" class="active">Aut ducimus</li>
<li data-id="sit_inventore_debitis" class="">Sit inventore debitis</li>
<li data-id="et_corrupti" class="">Et corrupti</li>
</ul>
</nav>
<div class="article-content">
<div class="jumplink-wrap" id="introduction"></div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<div class="jumplink-wrap" id="aut_ducimus">
<h2>Aut ducimus</h2>
</div>
<p>Lorem ipsum dolor sit amet. In sint quos vel cupiditate nemo At unde quasi. Non minima molestiae sit dolorem
nostrum eum odit nihil vel nobis tempore sit voluptatibus dolorem. Non accusantium voluptate qui error iste
ut pariatur repudiandae At molestias obcaecati aut ipsa debitis. Sit ipsam dicta est ipsa iste et minus
voluptatibus et autem saepe et repudiandae nostrum.</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>A porro quibusdam ut eaque blanditiis et esse voluptates. Sed harum vitae et quia iste id laudantium minus et
possimus dolorum ut officia neque eos recusandae atque est perferendis expedita? Eum nesciunt omnis id
voluptatem excepturi qui quasi libero eos eligendi omnis et numquam aperiam ut illum inventore est debitis
voluptas. Et sint quia aut esse temporibus hic voluptas dolores est voluptatem delectus At omnis fugiat eum
nihil doloribus.</p>
<p>Sit quis distinctio ut rerum libero et asperiores repellendus vel accusantium voluptatibus quo culpa magnam
eum voluptatem nihil est possimus iusto. Et natus quos eum molestiae officiis non minus dolorem est sint
ducimus. Eum mollitia dolorem ut deserunt natus ea unde nihil.</p>
<div class="jumplink-wrap" id="sit_inventore_debitis">
<h2>Sit inventore debitis</h2>
</div>
<p>Lorem ipsum dolor sit amet. Et voluptatem nobis vel deleniti distinctio et placeat consequuntur qui aliquid
quisquam ex quia vitae. Sed cumque nostrum in velit necessitatibus vel quia quod ut magni optio est quam
aperiam non omnis illum.</p>
<p>Id illum vitae a facere soluta ut fugiat nostrum. Non sunt dolor ut soluta nihil est placeat repellendus ab
amet animi sit dolorem temporibus! Est voluptatem itaque eos eveniet deleniti qui voluptas facilis et
voluptatem doloremque et magnam amet est sequi quod.</p>
<div class="jumplink-wrap" id="et_corrupti">
<h2>Et corrupti</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id nihil repellendus sit dolor excepturi quo aspernatur voluptates eum repellat
voluptate. Est obcaecati veritatis ut explicabo veritatis ut delectus quia ad accusamus dolore ut optio
consequatur et rerum tenetur qui quibusdam eligendi.</p>
<p>Rem recusandae aliquid est deserunt Quis aut unde nihil ea aliquam quisquam vel tempora quibusdam et autem
nemo. At magnam consequatur et reiciendis eligendi sit exercitationem voluptate ut dolorem harum est
doloremque repellendus cum beatae rerum. Et provident sint sed beatae molestiae eos quas distinctio. Est
voluptates commodi vel voluptatibus praesentium est sint saepe id quae amet et illum quam qui cupiditate
voluptatibus.</p>
<p>Aut numquam officia et doloremque praesentium et dolorum molestiae in illo nulla sed quos reprehenderit est
fuga dolorem sed quaerat blanditiis. Et voluptates consequatur sed cumque deserunt vel asperiores nulla est
ducimus tempora id quia sapiente ex repudiandae voluptatem 33 quaerat molestias.</p>
<p>Non ipsam reiciendis non nulla aliquam est voluptate veniam qui dolor blanditiis? Ea internos distinctio vel
eligendi veniam sit assumenda nesciunt eum eius quos cum aperiam autem eum quibusdam eius.</p>
<p>In fuga quia a praesentium accusamus sit dolores consectetur. Est nobis nostrum ut vitae labore aut odio
voluptatibus sit laboriosam expedita aut voluptas voluptatibus aut quia saepe ut recusandae unde.</p>
<p>Vel soluta rerum At rerum maxime aut aperiam neque aut enim voluptatibus qui laborum delectus ea sunt
repellendus. Et quia voluptatibus eum reprehenderit molestias vel amet sunt. Et quisquam ullam eum illum
nisi in aliquid recusandae et quam corrupti. Aut architecto dolor sit iure consequatur in nihil saepe ut
consequatur consequatur.</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>

Make your header position: sticky - therefore there's no need to set margin-top to anything
Use scroll-margin-top like: .jumplink-wrap {scroll-margin-top: var(--header-height); }
to smooth scroll use: scroll-behavior: smooth; on the html
Example:
* {
box-sizing: border-box;
margin: 0;
}
:root {
--header-height: 60px;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
}
.article-content {
max-width: 40rem;
font-size: 3rem;
}
header {
/* INSTEAD OF fixed */
position: sticky;
top: 0;
width: 100%;
height: var(--header-height);
border-bottom: 2px solid #000;
text-align: center;
background: hsla(127, 80%, 50%, 0.8);
}
header nav {
display: flex;
gap: 2rem;
}
header nav a {
padding: 1rem 0;
}
.jumplink-wrap {
scroll-margin-top: var(--header-height);
}
.nav {
/*padding-top: 70px; /* NOT NEEDED */
}
<header>
<nav class="nav" id="jumpNav">
Introduction
Aut ducimus
Sit inventore debitis
Et corrupti
</nav>
</header>
<div class="article-content">
<div class="jumplink-wrap" id="introduction">
<h2>Introduction</h2>
</div>
<p>ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit velit
quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<div class="jumplink-wrap" id="aut_ducimus">
<h2>Aut ducimus</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<div class="jumplink-wrap" id="sit_inventore_debitis">
<h2>Sit inventore debitis</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<div class="jumplink-wrap" id="et_corrupti">
<h2>Et corrupti</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
ž
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
</div>

How to get scrollable div currentScrollY and totalScrollHeight

Here is my test code:
<div id="scrollable" style="width:100%; height:100px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorum esse,
illum nostrum placeat quia? Animi corporis explicabo modi neque porro possimus
quos totam. Accusamus ad aliquam animi, aperiam atque beatae consectetur
debitis deleniti dignissimos doloremque doloribus ducimus ea error est eveniet
fugit id iste itaque mollitia nostrum officia omnis optio quam quidem saepe
sapiente ullam voluptatibus. A ad aliquam at aut, blanditiis commodi
consectetur consequuntur delectus dignissimos ducimus ea esse est fuga fugiat,
fugit illo inventore ipsa iusto laboriosam libero minima minus nesciunt nulla
officia quaerat quam quidem quo recusandae reprehenderit similique soluta
tempora, temporibus ut vel veritatis vero voluptatem. Ab culpa dolore eveniet
exercitationem explicabo incidunt itaque laudantium molestiae nisi nobis
nostrum, numquam possimus quam, quas quis, quisquam recusandae sed voluptatem.
Deleniti esse iure nisi odio ullam. Autem ducimus eius enim inventore placeat
possimus repudiandae voluptates? A adipisci cumque doloribus eligendi, eos
eveniet harum laborum minus nam optio quae sed voluptas voluptates.
Accusantium architecto, at dolor dolore eligendi incidunt ipsa, ipsum iure
mollitia, nam nesciunt quo repellendus reprehenderit rerum sapiente similique
voluptas. Eos laborum optio quibusdam voluptatum. Deserunt dolor doloribus
enim minus praesentium reiciendis soluta tenetur. Ad consectetur consequuntur
cumque iure molestias nam perferendis placeat quibusdam soluta, voluptatum!
</div>
<script
type="text/javascript"
src="../node_modules/jquery/dist/jquery.js"
></script>
<script>
var scrollable = document.querySelector("#scrollable");
$(scrollable).on("scroll", ev => {
console.log(`container scroll top:${$(scrollable).scrollTop()}`);
console.log(`container scroll height:${$(scrollable).height()}`);
});
</script>
I'm confused, when i scroll to scrollable div bottom, the scroll top != scroll height

This should be correct.
container scroll height is the height of the window.
container scroll top is how far from the top of the content you've scrolled.
So if I load your content in my browser, and the container scroll height = 100, and I make the window narrower, then my container scroll height is still 100, I haven't changed the height of the window. But now you can scroll further down, so your container scroll top could change as you scroll further down.

intersection observer multiple animation

I want to achieve different animation for many elements on scroll, so instead of using window.scroll i'm using intersection observer api, but i want to know if my approach is effective and won't cause performance drop, basically what i did is make a single function to hold the entire animation of the website and check if the target has specific class then do something like so :
const one = document.querySelector('.one')
const two = document.querySelector('.two')
const three = document.querySelector('.three')
function animation (entires) {
entires.forEach(entry => {
if(entry.isIntersecting) {
if(entry.target.classList.contains('text')) {
entry.target.style.transform = 'translateY(0)'
}
if(entry.target.classList.contains('one')) {
entry.target.style.transform = 'translateX(100px)'
}
if(entry.target.classList.contains('two')) {
entry.target.style.transform = 'translateY(0)'
}
if(entry.target.classList.contains('three')) {
entry.target.style.transform = 'skew(10deg)'
}
}
})
}
const observer = new IntersectionObserver(animation)
i'm not experienced enough but i feel like it's spaghetti code and not efficient and how can i observe multiple elements ? do i have to repeat observer.observe for each element i want to observe ?

The Intersection Observer API helps determine if a specific element is visible in a viewport and animations are a perfect use case for this API, so no performance drop there, on the contrary, it has a smoother performance than window.scroll. But in small examples like these it's not really noticeable.
You can also use it for:
Image lazy loading
Infinite scroll
Launching actions based on viewport visibility
https://jsfiddle.net/v6hyqtoa/
const one = document.querySelector('.one')
const two = document.querySelector('.two')
const three = document.querySelector('.three')
const divs = [one, two, three];
function animation(entires) {
entires.forEach(entry => {
if (entry.isIntersecting) {
if (entry.target.classList.contains('one')) {
entry.target.style.transform = 'translateX(100px)'
}
if (entry.target.classList.contains('two')) {
entry.target.style.transform = 'translateY(0)'
}
if (entry.target.classList.contains('three')) {
entry.target.style.transform = 'skew(10deg)'
}
}
})
}
const observer = new IntersectionObserver(animation)
divs.forEach((div) => observer.observe(div));
<div class="one">
<p>
------------------------------- <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br/> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br/>
</p>
</div>
<div class="two">
<p>
------------------------------- <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br/> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br/>
</p>
</div>
<div class="three">
<p>
------------------------------- <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br/> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
</div>
More reading : Animate on scroll with intersection observer

Readmore doesn't work when I have an unorderlist

When I have an unordered list of paragraph text inside the container, the read more/readless does not hide any text before the UL list
https://codepen.io/tickatop/pen/NZavXg
Almost made me run crazy
<div class= "col2">
<p class="lead" height="50">>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa, <ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id.
Perspiciatis provident accusamus esse possimus, eveniet corrupti exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt. Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
<button class="more more-lead">Read more...</button>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

I'm not sure if this is helpful or not, but it has the function you are hoping for so it is an alternative at least. It also works for any number of read-more sections on a single page.
Note that the read more button has the class .more, and an attribute for which links it to the element that it sets the height for.
Hope this helps
Demo
// Hide on load via jquery to avoid issues where JS is disabled
// Cycle through each more button
$(".more").each(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Set height from inline property
elem.css("height", elem.attr("height")).css("overflow", "hidden");
});
// Add click event to more button
$(".more").click(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Toggle expanded class
// Could check for inline property being auto / set and adjust if you want to avoid an !important CSS rule
elem.toggleClass("expanded");
// Toggle text of buttons
if ($(this).text() == "Read more...") {
$(this).text("Read less...");
} else {
$(this).text("Read more...");
}
})
.expanded {
height: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col2">
<div id="lead" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="lead">Read more...</button>
</div>
<div class="col2">
<div id="second" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="second">Read more...</button>
</div>

How to compensate for loop performance differences among browsers

I have this typewriter script which uses timeout in a self-referencing function to add a character to element.
The problem is that is takes longer on firefox than in chrome and I want it to complete within the same duration across all browsers.
Chrome: Performed in: 3.167695
Firefox: Performed in: 4.10383
var start = performance.now();
txt = $('#text').html();
typeWriter(txt,0);
function typeWriter(text, n) {
if (n < (text.length)) {
$('#text').html( text.substring(0, n+=2) );
setTimeout(function() {
typeWriter(text, n);
}, 1);
}else{
var end = performance.now();
$('body').append('<h4>Performed in: ' + (end - start)/1000);
}
}
#text{
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>
Should I use the timer to figure out how many characters to add per cycle? What's the best way to fix this?

Use requestAnimationFrame - you can then set a pretty accurate elapsed time - in the example I use 3 seconds
the wait is 1000/60 - because requestAnimationFrame runs at 60fps
the code could easily just be
var count = txt.length 3 / 60;
Where the 3 is the number of seconds you want this to take, and remove the var wait and elapse - I've only included the code like this to help see what's happening
var start = performance.now();
var txtEl = document.getElementById('text');
var txt = txtEl.textContent;
var wait = 1000/60;
var elapse = 3000;
var count = txt.length * wait / elapse;
var typeWriter = function (text, n) {
if (n < (text.length)) {
txtEl.textContent= text.substr(0, n+=count);
requestAnimationFrame(function() {
typeWriter(text, n)
});
} else {
var end = performance.now();
document.body.insertAdjacentHTML('beforeEnd', '<h4>Performed in: ' + (end - start)/1000);
}
}
typeWriter(txt, 0);
#text{
font-size:10px;
}
<div id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo rem, id nemo, animi repellendus ullam error ratione molestias, praesentium temporibus. Repudiandae dolorum consequuntur at tenetur, beatae debitis dolore dicta animi omnis quo, laborum quos? Veritatis quas provident iste adipisci deserunt excepturi a, suscipit neque soluta error impedit animi. Exercitationem aliquid reprehenderit excepturi. Nisi placeat unde, iste veniam? Molestias, soluta et corrupti possimus deleniti magni tenetur! Ut ab, dolores dicta temporibus amet debitis harum dignissimos, nisi neque cum assumenda accusamus minima quod deserunt veniam suscipit tempore eligendi labore. Eum ut, quod repellat adipisci distinctio sit nobis cum iure porro quasi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem harum repellat vitae atque ipsa cumque sed iste adipisci omnis, ad magnam numquam amet, totam, autem ab quis maxime ea, ducimus nulla sunt assumenda aliquam distinctio. Quam sit ducimus, amet esse sunt consectetur facilis praesentium, soluta fugiat vero alias vel. Aspernatur amet ea odit hic voluptatum, doloremque rem cumque dolore accusamus quia enim praesentium, officia deserunt reprehenderit ex debitis. Provident eos voluptate quibusdam, esse atque porro, nisi sunt amet fugit, distinctio beatae! Sed atque voluptatum ullam illum perspiciatis aut mollitia! Cumque voluptatum rerum, accusantium, ad placeat culpa voluptatibus distinctio aspernatur laudantium.</div>
Firefox: 3.022785
Chrome: 3.022000
Close enough for gubmint work, would you say?

SetTimeout is an asynchronus call whatever time you specified in setTimeout does not mean it will be executed exactly after that time. Whenever you do
setTimeout()
It request will be stored on stack and it will be able to execute AFTER that time. After doenot means as soon as. so we do not have any control on that.
Now question is that what is difference between two browsers? Chrome uses v8 javascript engine and firefox uses spidermonkey. So it is like you are asking two persons to do same task in same time.(correct me if i am wrong)