Use browser same page jump link functionality with offset

Use browser same page jump link functionality with offset - javascript

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>

Related

Parrallax running inconsistently

I built a website where every page scrolls very smooth with parrallax, except for the home page.
The used code is the same, so I don't get why it differs so much.
I tried everything, but don't know why it keeps happening.
Necessary code below. Live preview: https://www.watwiljij.nu
CSS
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: none;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
Javascript
if ($(window).width() > 800){
window.addEventListener('scroll', () => {
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
// document.getElementById("illustrationContainer").style.transform = 'translateY('+ window.pageYOffset* 1 + 'px)';
for(let i = 0; i < children.length; i++) {
// children[i].style.transform = 'translateY(' + (window.pageYOffset / (2 + 0.3*i) * children.length / 32) + 'px)';
children[i].style.transform = 'translateY(' + (window.pageYOffset - ((window.pageYOffset / i)/5)) + 'px)';
}
}, false);
}

You can try this code but I am not sure why you are not using css transition. Without transition, your css transformY will flicker or you can use any JS library for this kind of effect.
window.addEventListener('scroll', () => {
const distance = window.pageYOffset;
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
for(let i = 0; i < children.length; i++) {
children[i].style.transform = `translateY(${distance * 1}px)`;
}
}, false);
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: transform .1s linear;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="illustrationContainer">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Planet.svg" style="opacity: 0;">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Planet.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration1" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Square.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration2" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Mountains.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration3" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Man.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration4" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Splashes.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Plane.svg" style="transform: translateY(0px);">
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?
</body>
</html>

CSS overflow auto not scrolling smoothly for position fixed on iphone

I have a button that you click on and a div appears.
If you'll scroll down from an iPhone you'll see that it's not scrolling smoothly as it should. for some reason it's losing that behavior and I don't know why.
HTML
<button id="page1">Hey</button>
<div class="page1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt nemo, unde, nisi quisquam minus blanditiis rerum harum obcaecati, dolore perspiciatis? Ad nemo aperiam cumque a delectus facilis tempora architecto?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laboriosam minus praesentium excepturi cumque culpa quibusdam, maiores odit cupiditate natus, possimus, libero repellendus sed doloribus animi eos cum dolorum at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis et hic tenetur velit iste dignissimos est suscipit ducimus facilis, quibusdam dicta iure quidem beatae quisquam sit quasi harum, provident nostrum at illum. Quisquam accusamus autem id dolorem harum aspernatur est impedit amet, asperiores praesentium, vitae molestiae repellendus natus velit libero ipsam, qui assumenda pariatur nulla dicta ea voluptatum. Dolorem eos officia, et nostrum numquam quasi hic corrupti fugit commodi beatae aliquid minima, vel dolores maiores ex! Quas soluta nemo quod, natus quo tenetur odio, repellendus iure amet fuga! Odit temporibus debitis voluptate blanditiis, veniam delectus minima dolores, commodi quas laborum nobis dolorem placeat ea, officia magnam totam fuga corporis cumque. Quos asperiores veritatis quo! Quo dolorum officiis temporibus repudiandae aliquam esse, ex expedita sed sequi corporis voluptatum ullam accusamus laboriosam quae, ducimus ea qui quia! Quis nostrum, distinctio maxime. Similique in assumenda ipsum officia incidunt rem ratione velit harum dolore labore id aperiam quaerat magnam iste ipsam, minima, rerum consequuntur earum modi molestiae dolorum optio temporibus! Adipisci optio ex, fugiat nostrum sint, sunt at. Reprehenderit autem mollitia earum, ipsa porro, tempora tenetur impedit omnis unde iure, alias vitae illo quod ab assumenda magnam molestias atque provident voluptatem laboriosam quae! Optio quisquam corporis beatae iure, natus, cumque porro, ullam dolorem illum odit quia itaque ut molestias voluptas. Architecto animi ratione, ad accusamus commodi fugit nemo laborum similique illum suscipit deleniti, sed deserunt? Quis nam quasi qui ab vel dignissimos vitae in, aspernatur soluta aliquam explicabo magni alias tempore, molestias facilis ducimus aut inventore neque animi hic. Soluta officiis exercitationem iure magnam earum facere provident, alias delectus explicabo quibusdam tempora amet aperiam, unde, vitae! Dolorem neque, commodi harum libero officiis explicabo perspiciatis ullam. Quisquam, nostrum illo cum hic eaque! Iste ut omnis ab accusantium eaque quaerat dolorum, nulla eius rerum est ipsa. Nostrum asperiores esse porro nam, sint minus ullam. Enim porro eveniet harum, ducimus veritatis eius natus non quo eaque ut repudiandae hic sunt dolores quibusdam maxime fugiat fugit distinctio! Inventore alias commodi perferendis minus sint ipsum officia quaerat aperiam sapiente in ratione, accusantium nobis eum et temporibus cum accusamus consectetur doloribus illum? Odio quisquam placeat deleniti. Ducimus accusantium at esse autem architecto incidunt omnis earum, ipsam dignissimos, dolorem ex quibusdam! Repellendus expedita unde, ullam, placeat, aut officia doloremque mollitia impedit quidem sequi maxime. Cumque sit eaque repellendus perferendis, accusamus deserunt iusto error quod magni, quo vero unde molestiae corporis suscipit?</p>
</div>
CSS
.page1 {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
background:#039;
color:#fff;
padding:40px;
}
.noscrolling {
overflow:hidden;
}
button {
margin:30px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var button_id = $(this).attr('id');
$('.'+button_id).fadeIn();
$('body').addClass('noscrolling');
});
});
</script>

Try adding this css.
.page1 {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}

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>

Go to link with jquery animate

I want to jump a div clicking by anchor with jquery animation I wrote a simple basic function but it doesn't work and I couldn't find my mistake ? where is my mistake ?
my a[href] and my id value is same
$(document).on("click", ".tur-programi li a", function(e) {
var getAhrefs = $(this).attr("href");
$('html, body').animate({
scrollTop: $("div#getAhrefs").offset().top
}, 2000);
e.preventDefault();
});
<ul class="tur-programi">
<li>Section1</li>
<li>Section2</li>
<li>Section3</li>
<li>Section4</li>
</ul>
<div id="section1">
<h1>SECTION 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section2">
<h2>SECTION 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section3">
<h3>SECTION 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section4">
<h4>SECTION 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Replace
scrollTop: $("div#getAhrefs").offset().top
with
scrollTop: $( getAhrefs ).offset().top //since getAhrefs is a variable

Your issue is that you don't call the method -> u just have it as string ;)
$(document).on("click", ".tur-programi li a", function(e) {
var getAhrefs = $(this).attr("href");
$('html, body').animate({
scrollTop: $("div" + getAhrefs).offset().top
}, 2000);
e.preventDefault();
});
<ul class="tur-programi">
<li>Section1</li>
<li>Section2</li>
<li>Section3</li>
<li>Section4</li>
</ul>
<div id="section1">
<h1>SECTION 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section2">
<h2>SECTION 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section3">
<h3>SECTION 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section4">
<h4>SECTION 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).on("click", ".tur-programi li a", function(e) {
var getAhrefs = $(this).attr("href");
$('html, body').animate({
scrollTop: $(getAhrefs).offset().top
}, 2000);
e.preventDefault();
});
<ul class="tur-programi">
<li>Section1</li>
<li>Section2</li>
<li>Section3</li>
<li>Section4</li>
</ul>
<div id="section1">
<h1>SECTION 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section2">
<h2>SECTION 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section3">
<h3>SECTION 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section4">
<h4>SECTION 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You have to bring the JS variable outside the string, like this:
$(document).on("click", ".tur-programi li a", function(e) {
var getAhrefs = $(this).attr("href");
$('html, body').animate({
scrollTop: $("div"+getAhrefs).offset().top
}, 2000);
e.preventDefault();
});

Animating the height of a div to show the whole content

I hear that you can't set the height to auto, initial, or inherit for the end of an animation. so how would you set the height to the content's height? In my example the ending height is 500 but I want the height to be whatever the content is.
$(function(){
console.log($(".area").height())
$(".area").on("click", function(){
$(this).toggleClass("open")
})
})
.area{
background: limegreen;
width: 50%;
margin: 0 auto;
max-height: 200px;
overflow: hidden;
transition: max-height .5s;
}
.area.open{
max-height: 500px;
/* max-height: initial;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab,
</div>

Instead of using css transition I have used animate of jquery. Here height is toggled between preset value 200px and auto.
$(function(){
console.log($(".area").height())
$(".area").on("click", function(){
if(!$(this).hasClass('open')) {
$(this).addClass('open');
var currHt = $(this).height();
var autoHt = $(this).css("height","auto").height();
$(this).css("height",currHt+"px").animate({height: autoHt+"px"}, 500);
} else {
$(this).removeClass('open')
$(this).animate({height: "200px"}, 500);
}
})
})
.area{
background: limegreen;
width: 50%;
margin: 0 auto;
height: 200px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab,
</div>

Develop Reference

JavaScript is the programming language of the Web.