Develop Reference

Materialize scrollspy is changing the URL and refreshing the page

Materialize scrollspy (https://materializecss.com/scrollspy.html) is changing the URL and refreshing the page.
I have used the same code mentioned in the Materialize document in my Vue.js project for scrolling to particular position, but the page is getting refreshed with changing the URL by appending the selected div's Id at the end of the URL, instead of scroll.
In Template
<div class="row">
<div class="col s12 m9 l10">
<div id="introduction" class="section scrollspy">
<p>Content</p>
</div>
<div id="structure" class="section scrollspy">
<p>Content</p>
</div>
<div id="initialization" class="section scrollspy">
<p>Content</p>
</div>
</div>
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li>Introduction</li>
<li>Structure</li>
<li>Intialization</li>
</ul>
</div>
</div>
Mounted:
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});

For using ScrollSpy of materializecss, first I added it in main.js file:
import 'materialize-css/dist/css/materialize.min.css'
import 'materialize-css/dist/js/materialize.min.js'
Then in the component that I want to use ScrollSpy, I have this code:
ScrollSpy.vue:
<template>
<div class="row">
<div class="col s12 m9 l10">
<div id="introduction" class="section scrollspy">
<p class="heightLong">Accusamus aliquam amet aperiam, aspernatur, atque commodi consequuntur dignissimos doloremque ea eaque earum error est fuga inventore iste mollitia nobis obcaecati, odit perspiciatis quam quibusdam recusandae repellat saepe sapiente sint! Adipisci alias aliquam aliquid dignissimos dolorum enim excepturi illo minima, pariatur perferendis repellendus suscipit totam veniam. Aperiam asperiores atque consequatur deleniti eum ex excepturi facilis mollitia pariatur, quisquam repudiandae saepe, similique ullam ut vitae voluptate voluptates. Aspernatur cumque distinctio ducimus enim et, facilis ipsa ipsum maxime neque odio omnis, recusandae repellat sapiente sunt totam unde, veritatis? Beatae distinctio ducimus ea eius est ex, fuga illum incidunt iste labore nam nihil porro provident tempore unde voluptate voluptatum. Aliquid beatae, consequuntur ea et neque nesciunt quis similique suscipit veniam voluptatum! Aliquam, aliquid cum esse fugiat ipsa perferendis placeat possimus quae unde velit! A asperiores at aut consequatur corporis delectus deleniti dignissimos dolor doloribus dolorum ducimus enim excepturi illum ipsum iste iusto libero minima, minus natus necessitatibus neque nihil odio officiis omnis pariatur perferendis quae quas, repellendus rerum saepe sed sunt tempora temporibus ullam veritatis voluptate voluptates? Aliquam amet dignissimos dolorem ea eaque enim esse est eum fugit hic illo inventore labore, laboriosam molestiae natus necessitatibus nisi odit officia optio, quae quam ratione, rem repellendus sequi tempora ullam unde! Eum eveniet hic praesentium voluptatibus! Alias, aliquam consequatur deleniti dicta exercitationem labore, laudantium magnam omnis optio perferendis possimus praesentium quidem, quos suscipit veritatis vitae voluptate voluptatum! Adipisci aliquam at atque aut dolor eaque eveniet explicabo fugit id in iste libero magni molestias nihil officia quas quibusdam, suscipit tenetur totam ut velit veniam veritatis, voluptatum. A aliquam animi asperiores atque blanditiis consectetur deleniti dolorum est ex id illum impedit incidunt iste libero maiores maxime mollitia neque nihil nisi nobis odio odit omnis perferendis possimus praesentium quae rerum, tempora ut, veritatis vero. Animi dolore est ex fuga laborum nobis suscipit! Ab ad animi asperiores autem blanditiis consequatur delectus enim ex exercitationem facere illum incidunt inventore modi molestiae necessitatibus nihil optio possimus quas quia, recusandae repellat repellendus similique soluta tempore vitae. Commodi labore saepe sequi soluta. Adipisci beatae consequatur, distinctio eos id illum ipsa iste nesciunt, nostrum perspiciatis quas quibusdam quod recusandae</p>
</div>
<div id="structure" class="section scrollspy">
<p class="heightLong">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ipsum laboriosam necessitatibus! Atque ducimus earum eligendi nulla numquam, voluptates voluptatibus. A ab animi asperiores culpa debitis deserunt dolore, dolorem doloremque earum esse explicabo fugiat hic impedit iste labore minus molestias neque nobis porro quasi, quia quis, quod repellendus vel velit? Ab architecto, aspernatur atque dolores eligendi ex fuga illo in incidunt laboriosam magnam molestiae nam neque nostrum quidem vel velit, vero voluptatibus. Corporis dolor eaque et inventore, ullam voluptatibus? Architecto atque dolor error in, nesciunt numquam quisquam quo ratione reiciendis voluptatem. Accusamus animi architecto at aut beatae corporis culpa distinctio doloremque earum eum exercitationem expedita in ipsam molestiae molestias necessitatibus, nemo neque nobis optio placeat porro quaerat ullam ut! Ab aliquid architecto asperiores delectus deleniti dolor dolore doloremque esse est expedita fugiat fugit itaque minima minus natus nemo neque perferendis possimus quibusdam recusandae reiciendis, sequi sunt suscipit totam vero vitae?</p>
</div>
<div id="initialization" class="section scrollspy">
<p class="heightLong">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, assumenda deserunt dicta expedita hic ipsam laudantium libero odit praesentium provident quaerat repudiandae, rerum sapiente sequi sint ullam vero? Autem commodi, consequatur corporis cupiditate doloribus earum est incidunt iste iure minus pariatur porro rem tempore! Aspernatur autem, dignissimos dolorum ducimus necessitatibus nulla pariatur temporibus velit. Hic modi repellendus reprehenderit tempore voluptate? Assumenda atque dignissimos distinctio dolor doloremque et fuga molestiae totam vitae! Ad amet blanditiis consequuntur culpa deserunt doloremque dolores eaque eligendi enim eos explicabo fuga hic id in ipsum iusto labore libero magnam maxime minima minus molestias natus nisi non omnis porro, possimus praesentium, saepe sit soluta tempora totam voluptas voluptatum. Atque autem dolores vitae. Blanditiis commodi corporis dicta eligendi nulla ratione tempore, totam velit? A alias blanditiis, commodi consectetur cum cumque cupiditate delectus dolor dolorum error ex excepturi harum impedit iure magnam maiores modi molestias neque nisi odio, placeat provident qui recusandae rerum sit sunt temporibus tenetur vel vero, vitae. Aliquam animi aperiam, culpa cupiditate dicta distinctio eos et excepturi exercitationem explicabo harum hic impedit labore libero magnam, maiores minus molestiae mollitia nam necessitatibus nostrum officia quia repudiandae sunt suscipit temporibus unde veritatis vero voluptatibus voluptatum. Atque delectus distinctio eum, incidunt, itaque maxime nesciunt nisi quasi quis ratione repellat sunt vero voluptatum? Aliquid dolor ipsa labore nam nulla omnis pariatur saepe. Amet culpa explicabo facilis id incidunt ipsa ipsam labore maxime modi nam necessitatibus nostrum officia perspiciatis, quasi totam unde voluptates? Accusantium atque blanditiis, corporis eaque, est fugit inventore molestias omnis possimus quas quis quod sapiente tenetur, vel voluptas?</p>
</div>
</div>
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li>Introduction</li>
<li>Structure</li>
<li>Intialization</li>
</ul>
</div>
</div>
</template>
<script>
import M from 'materialize-css';
export default {
name: "ScrollSpy",
mounted() {
let elems = document.querySelectorAll('.scrollspy');
M.ScrollSpy.init(elems);
}
}
</script>
<style scoped>
.heightLong {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid red;
}
</style>
I added some extra text and a CSS class for better view of "scrollspy" functionality. It works fine for me and does not change the url or refreshing the page.

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

ScrollTop/ScrollBottom Issues in jQuery

I'm trying to test out a function in jquery where I have a vertical progress bar next to some text. The ideal function is that the value of the progress bar fills as the user scrolls down. I've got it to work perfectly except that the progress bar fills from the bottom to the top. I want it to fill from the top to the bottom, so the color drips down the progress bar.
Can someone help? Here's my code.
$(window).scroll(function() {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d - c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
progress {
position: fixed;
top: 15px;
}
.vertical {
margin-top: 200px;
display: inline-block;
width: 20%;
height: 40px;
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-2">
<progress class="vertical" id="progressbar" value="0" max="100"></progress>
</div>
<div class="col-10">
<p class="card-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga obcaecati iusto, commodi hic doloremque cumque consequatur! Iste, quaerat. Officiis voluptas modi cupiditate similique quos obcaecati exercitationem saepe. Neque, molestias voluptatum. Nobis
illo commodi temporibus hic soluta quas odit aperiam dicta mollitia? Dolor neque similique delectus tenetur, officiis id consequatur molestias quaerat! Iste aspernatur laborum animi rem molestiae possimus eligendi laudantium! Tempore asperiores
repellendus dolore corrupti, deleniti, aperiam culpa vitae repellat, hic quaerat cum facilis laborum! Dignissimos sapiente temporibus quas beatae natus placeat error dolor, praesentium assumenda voluptatum adipisci blanditiis reprehenderit. Pariatur
ipsum eum molestiae non. Nisi a id voluptas? Iste, ad cum autem amet magni aut quidem neque laboriosam, cumque quaerat itaque necessitatibus velit dolores architecto optio reiciendis pariatur animi. Doloremque nemo quia cupiditate asperiores obcaecati,
nobis iure labore in deleniti perspiciatis necessitatibus accusamus ad cum provident libero. Repellendus et suscipit quaerat pariatur sed corporis dolores laborum voluptate odit ullam! Cum, quis voluptatum obcaecati quibusdam illum dolores dolor
nihil velit, officia nisi, harum est perferendis impedit laudantium optio. Hic ipsam dolorem eos sit assumenda veritatis quia quis accusamus molestiae soluta? Deserunt, beatae placeat! Quidem porro ipsam aspernatur facere tempore incidunt nisi
consequatur veritatis, tempora laborum a est asperiores adipisci. Asperiores eius sapiente quisquam, vero voluptatibus quae fugiat dicta maxime natus. Excepturi commodi quidem magnam ullam repudiandae, sapiente nesciunt iste veritatis iure ea
velit facere pariatur voluptas tempora assumenda! Magni provident voluptates quam voluptatem vel fugit illum eius nam praesentium accusamus! Suscipit reiciendis atque magnam. Laudantium exercitationem suscipit facilis nemo tempora consectetur
facere ipsam quo, incidunt voluptatibus est earum atque culpa nobis modi voluptatum vero nulla sed impedit error! Cum, dolores! Molestias vitae velit, nam amet magni eveniet et minus odio accusamus nulla nisi vel unde similique voluptatem consectetur
laborum enim magnam mollitia aspernatur? Ab eligendi soluta accusantium, laboriosam numquam nam?
</p>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro velit, ullam sequi expedita neque tenetur aspernatur quisquam explicabo placeat, facilis eos inventore mollitia in iure dicta id sint hic perferendis. Reprehenderit fugit distinctio consequatur
quibusdam. Rerum perspiciatis natus ad, necessitatibus beatae minus nemo molestias sit, corporis quo dolor magnam sed totam dicta eveniet aperiam quia voluptas labore voluptatem quibusdam soluta? Porro dicta distinctio odio maxime tempora! Illum
repudiandae, quod eum obcaecati quae voluptates tempore ea ullam, earum assumenda, rem veniam amet beatae ratione magnam fugiat sapiente asperiores recusandae facere quos. Enim, est dolorum! Repellat perspiciatis explicabo ducimus quo iste vel,
deserunt quia eaque, dignissimos corrupti, in non eveniet minima voluptates delectus temporibus rem libero ad excepturi sunt accusamus unde ipsam. Laboriosam blanditiis dolor voluptatum tenetur. Quae maiores dignissimos molestias dolore beatae
fugiat veniam mollitia eius illo enim nesciunt est qui possimus cupiditate laboriosam, rerum minima. Sequi dolorem eius aliquam quia. Magnam eos quas molestiae unde beatae consequuntur maiores itaque aperiam, totam labore quidem dicta sunt pariatur
inventore recusandae ea! Eius eaque molestiae sunt, hic sed possimus? Tenetur commodi laborum necessitatibus. Unde debitis harum facere ab at! Quod accusantium explicabo, atque laboriosam rerum voluptatum. Tempore iusto distinctio hic est a, mollitia
ad explicabo. Veritatis, commodi! Corporis sint provident natus impedit nihil! Porro labore voluptates veniam ducimus! Culpa sint eos distinctio itaque tenetur esse expedita libero at dolorem assumenda vero molestiae repellat, provident laboriosam
tempore, earum placeat perferendis consequatur praesentium. Repellendus, laboriosam? Repellat, expedita sequi. Doloribus quod, magnam consequatur, numquam vel omnis iure doloremque obcaecati deleniti ullam adipisci perspiciatis aliquam, ratione
distinctio non expedita aperiam? A, saepe! Itaque nam at recusandae doloremque? Ipsa et aut dicta, obcaecati eligendi, tempore soluta aspernatur culpa hic sed, rem a voluptatum assumenda unde illum perspiciatis velit reprehenderit ratione distinctio
mollitia. Eligendi, assumenda iusto. Reiciendis, accusamus quam.
</p>
</div>
</div>
</div>

Use transform: rotate(90deg) instead of transform: rotate(-90deg)
rotate(-90deg) rotate your progress bar into anti-clockwise
0 to 180 is clockwise, 0 to -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around.
More help on rotate()
$(window).scroll(function() {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d - c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
progress {
position: fixed;
top: 15px;
}
.vertical {
margin-top: 200px;
display: inline-block;
width: 20%;
height: 40px;
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-2">
<progress class="vertical" id="progressbar" value="0" max="100"></progress>
</div>
<div class="col-10">
<p class="card-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga obcaecati iusto, commodi hic doloremque cumque consequatur! Iste, quaerat. Officiis voluptas modi cupiditate similique quos obcaecati exercitationem saepe. Neque, molestias voluptatum. Nobis
illo commodi temporibus hic soluta quas odit aperiam dicta mollitia? Dolor neque similique delectus tenetur, officiis id consequatur molestias quaerat! Iste aspernatur laborum animi rem molestiae possimus eligendi laudantium! Tempore asperiores
repellendus dolore corrupti, deleniti, aperiam culpa vitae repellat, hic quaerat cum facilis laborum! Dignissimos sapiente temporibus quas beatae natus placeat error dolor, praesentium assumenda voluptatum adipisci blanditiis reprehenderit. Pariatur
ipsum eum molestiae non. Nisi a id voluptas? Iste, ad cum autem amet magni aut quidem neque laboriosam, cumque quaerat itaque necessitatibus velit dolores architecto optio reiciendis pariatur animi. Doloremque nemo quia cupiditate asperiores obcaecati,
nobis iure labore in deleniti perspiciatis necessitatibus accusamus ad cum provident libero. Repellendus et suscipit quaerat pariatur sed corporis dolores laborum voluptate odit ullam! Cum, quis voluptatum obcaecati quibusdam illum dolores dolor
nihil velit, officia nisi, harum est perferendis impedit laudantium optio. Hic ipsam dolorem eos sit assumenda veritatis quia quis accusamus molestiae soluta? Deserunt, beatae placeat! Quidem porro ipsam aspernatur facere tempore incidunt nisi
consequatur veritatis, tempora laborum a est asperiores adipisci. Asperiores eius sapiente quisquam, vero voluptatibus quae fugiat dicta maxime natus. Excepturi commodi quidem magnam ullam repudiandae, sapiente nesciunt iste veritatis iure ea
velit facere pariatur voluptas tempora assumenda! Magni provident voluptates quam voluptatem vel fugit illum eius nam praesentium accusamus! Suscipit reiciendis atque magnam. Laudantium exercitationem suscipit facilis nemo tempora consectetur
facere ipsam quo, incidunt voluptatibus est earum atque culpa nobis modi voluptatum vero nulla sed impedit error! Cum, dolores! Molestias vitae velit, nam amet magni eveniet et minus odio accusamus nulla nisi vel unde similique voluptatem consectetur
laborum enim magnam mollitia aspernatur? Ab eligendi soluta accusantium, laboriosam numquam nam?
</p>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro velit, ullam sequi expedita neque tenetur aspernatur quisquam explicabo placeat, facilis eos inventore mollitia in iure dicta id sint hic perferendis. Reprehenderit fugit distinctio consequatur
quibusdam. Rerum perspiciatis natus ad, necessitatibus beatae minus nemo molestias sit, corporis quo dolor magnam sed totam dicta eveniet aperiam quia voluptas labore voluptatem quibusdam soluta? Porro dicta distinctio odio maxime tempora! Illum
repudiandae, quod eum obcaecati quae voluptates tempore ea ullam, earum assumenda, rem veniam amet beatae ratione magnam fugiat sapiente asperiores recusandae facere quos. Enim, est dolorum! Repellat perspiciatis explicabo ducimus quo iste vel,
deserunt quia eaque, dignissimos corrupti, in non eveniet minima voluptates delectus temporibus rem libero ad excepturi sunt accusamus unde ipsam. Laboriosam blanditiis dolor voluptatum tenetur. Quae maiores dignissimos molestias dolore beatae
fugiat veniam mollitia eius illo enim nesciunt est qui possimus cupiditate laboriosam, rerum minima. Sequi dolorem eius aliquam quia. Magnam eos quas molestiae unde beatae consequuntur maiores itaque aperiam, totam labore quidem dicta sunt pariatur
inventore recusandae ea! Eius eaque molestiae sunt, hic sed possimus? Tenetur commodi laborum necessitatibus. Unde debitis harum facere ab at! Quod accusantium explicabo, atque laboriosam rerum voluptatum. Tempore iusto distinctio hic est a, mollitia
ad explicabo. Veritatis, commodi! Corporis sint provident natus impedit nihil! Porro labore voluptates veniam ducimus! Culpa sint eos distinctio itaque tenetur esse expedita libero at dolorem assumenda vero molestiae repellat, provident laboriosam
tempore, earum placeat perferendis consequatur praesentium. Repellendus, laboriosam? Repellat, expedita sequi. Doloribus quod, magnam consequatur, numquam vel omnis iure doloremque obcaecati deleniti ullam adipisci perspiciatis aliquam, ratione
distinctio non expedita aperiam? A, saepe! Itaque nam at recusandae doloremque? Ipsa et aut dicta, obcaecati eligendi, tempore soluta aspernatur culpa hic sed, rem a voluptatum assumenda unde illum perspiciatis velit reprehenderit ratione distinctio
mollitia. Eligendi, assumenda iusto. Reiciendis, accusamus quam.
</p>
</div>
</div>
</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>