Related
I have a tab that slides up and it can be closed with user based touch events for mobile devices. I got this sliding tab/modal to work well and it is a piece of code that is dynamically appended to the DOM.
Once this code is dynamically appended to the DOM, I also dynamically add certain event listeners. I got super stuck when I realized that my click event listener wasn't firing.
It got even more confusing when I noticed I could use .click() on the target element and it would fire but clicking on it would not work.
I figured out why this happened and it turns out that calling e.preventDefault() inside of my click event listeners was causing my click event not to work.
I am stuck on how to move forward here because e.preventDefault() keeps my page from scrolling when the tab is being swiped, but it is causing other events not to fire that are dynamically added inside of the tab.
1.) Setting passive to true stops e.preventDefault from being called and without e.preventDefault(), whole page scrolls. Is there a way to stop page from scrolling without calling e.preventDefault()?
2.) Why does e.preventDefault stop inner click event from running?
3.) Why does click() work still?
4.) How could this be better written that the page doesnt scroll and events can be dynamically added?
Here is a runnable example:
https://stackblitz.com/edit/js-uruonq?file=index.js
function openTab(config) {
const { onRender } = config
document.querySelector('#main').insertAdjacentHTML('beforeend', `
<div class="swipe-tab">
<div class="swipe-tab__content></div>
</div>
`)
const swipeTab = document.querySelector('.swipe-tab')
/**
* just assume these functions make the tab follow
* the users finger
*/
swipeTab.addEventListener('touchstart', e => {
e.preventDefault()
})
swipeTab.addEventListener('touchmove', e => {
// e.preventDefault() stops the whole page from scrolling
e.preventDefault()
})
swipeTab.addEventListener('touchend', e => {
e.preventDefault()
})
if (onRender) onRender()
}
openTab({
onRender() {
document.querySelector('.swipe-tab__content').insertAdjacentHTML('beforeend', `
<button class="test-btn"></button>
`)
const btn = document.querySelector('.swipe-tab .test-btn')
btn.addEventListener('click', e => {
// this will not log. e.preventDefault() stops this from working
console.log('clicked')
})
// this still works for some reason
btn.click()
}
})
What if you use CSS to prevent the scrolling behavior? For example, you could set the body to have a position fixed.
Demo (definitely not production code)
Instructions: Scroll to the buttons, click the FIX button FIRST. The page can no longer scroll. Click the UNFIX button and the page scrolls freely again. I added lots of content in there to point out that you'd need to keep track of the current scroll position before setting the position to fixed, and restore it after.
const fix = document.getElementById('fixed');
const unfix = document.getElementById('unfixed');
const bodyEl = document.body;
const docEl = document.documentElement;
fix.addEventListener('click', (e) => {
const top = docEl.scrollTop;
bodyEl.style.top = `${top * -1}px`;
bodyEl.style.position = 'fixed';
})
unfix.addEventListener('click', (e) => {
const top = bodyEl.style.top;
const scrollTopValue = top && top !== 'auto' ? parseInt(top.match(/\d+/gi)[0]) : 0;
bodyEl.removeAttribute('style');
docEl.scrollTop = scrollTopValue;
})
body {
font-family: sans-serif;
}
button {
background: red;
color: white;
padding: 1rem;
border: 2px solid crimson;
border-radius: .25rem;
font: inherit;
}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dolorem repellendus, odit, iste labore exercitationem consequatur, placeat autem dolorum rerum voluptas possimus non laboriosam neque perferendis sequi architecto quos officiis?</p>
<p>At vel doloremque perferendis optio molestias architecto ratione laboriosam! Consequatur rem asperiores numquam quia accusamus ipsam voluptate modi? Nemo in libero dicta quisquam similique sed veniam totam labore nam delectus.</p>
<p>Minus corporis labore commodi quae saepe nobis, unde impedit est pariatur vero quos similique tenetur deleniti architecto odio veritatis dolorum nulla officia illo eos incidunt ullam! Impedit quibusdam officiis molestias!</p>
<p>Expedita similique, repellendus labore error asperiores suscipit mollitia aperiam molestias fugit nihil quae ipsa officia nemo blanditiis quidem tenetur id dolor sapiente quibusdam sit laudantium voluptatum! Similique eaque repellat iste!</p>
<p>Cumque quod unde totam neque minima nemo, similique praesentium nulla, ea voluptas accusamus at mollitia, delectus deserunt. Aspernatur deserunt laboriosam non quod eos aut, expedita veritatis, perspiciatis modi culpa rerum.</p>
<p>Nostrum soluta illum sit eveniet, consectetur dolor molestiae, culpa aspernatur labore dicta earum iste doloremque quisquam ea et laudantium optio? Eaque ratione rerum optio, quas ad dolorum ullam harum qui?</p>
<p>Nisi voluptas exercitationem eligendi temporibus, sequi tempora dolor rem, maxime dignissimos ut placeat aliquid obcaecati nobis! Eligendi recusandae tempora, a impedit magni sunt nam non, deleniti ab blanditiis consectetur consequatur.</p>
<p>Voluptatum ipsa id maxime necessitatibus distinctio delectus deserunt, nesciunt officiis fugit labore doloremque, voluptatem iusto mollitia soluta, eligendi ducimus tenetur repudiandae dolorem aspernatur corrupti velit! Sed, dolorum. Vitae, similique quos!</p>
<p>Autem id temporibus doloribus veniam, corporis at nihil consectetur ut obcaecati iusto? Illum distinctio, nisi magni itaque quidem ratione ab esse porro neque hic laboriosam a suscipit aliquid ipsam odit.</p>
<p>Dicta et ducimus est consectetur tenetur at officiis, deleniti hic porro sunt? Ipsam, sed. Ut commodi recusandae quasi quis, natus adipisci corporis exercitationem, rerum perferendis voluptatibus at voluptate. Culpa, corrupti.</p>
<p>Ut aliquam dolorum tempore, eius esse libero repudiandae amet laboriosam nihil ipsum veniam assumenda neque fugit ipsa accusantium veritatis consequuntur exercitationem, ipsam unde, ad natus. Dignissimos commodi magni aliquam ab.</p>
<p>Dolorum, dolore porro. Enim ipsum eaque iste delectus dolor sint, aperiam veritatis soluta odio a provident, exercitationem expedita est, ipsam eligendi quidem? Sequi nostrum ratione nemo necessitatibus est nesciunt nobis.</p>
<p>Rerum enim reiciendis nihil officia aut ex, recusandae exercitationem dolores eos ipsum quos vero, minus aliquam et commodi! Commodi repellat debitis expedita magnam vel odio nihil dolorum, eos eligendi recusandae?</p>
<p>Culpa quasi quaerat quia atque? Temporibus officia sint consequatur animi rerum, molestias accusamus quod veniam in numquam. Provident quasi perspiciatis quos, inventore sint eius eos voluptate dolorem suscipit enim laboriosam.</p>
<p>Consectetur atque distinctio maiores necessitatibus minima provident voluptas sequi culpa optio enim eaque, ex sunt totam. In ea sequi fuga perspiciatis recusandae, asperiores quae, sunt ab adipisci quisquam, placeat laborum.</p>
<p>Sapiente iusto, quas labore possimus et recusandae molestias explicabo illo beatae! Iste culpa nihil excepturi est ratione vel, non, libero, cumque inventore maxime labore facere iusto sequi sint quos consequatur!</p>
<p>Commodi quo, in debitis nobis eum quaerat architecto eius laboriosam eveniet dicta tempore culpa nulla soluta dignissimos ab eligendi deleniti, doloribus amet voluptatem facilis officia iure rem dolorem. Magni, obcaecati!</p>
<p>Molestias voluptatem incidunt quas molestiae debitis facere praesentium dicta dolorum unde saepe aperiam quam odit magni in, explicabo sit nesciunt soluta, commodi dolor. Quod exercitationem quidem voluptas consequuntur praesentium saepe.</p>
<p>Eos accusamus ab voluptates quidem incidunt molestiae, nam delectus tempore libero cupiditate, labore doloribus qui praesentium fuga natus ratione iusto quia minima aut! Voluptatibus ut, asperiores velit quod nihil porro.</p>
<p>Porro quidem magni earum id assumenda odio minima. Aspernatur aut dolore quidem laudantium, ipsum modi dolores odio at unde. Pariatur eos reiciendis dolores accusamus similique commodi minus laboriosam rerum ratione.</p>
<p>Magni, ex possimus, recusandae molestias totam numquam laudantium quis sed placeat quod inventore? Perferendis facere, amet dignissimos repellat officiis ea mollitia pariatur voluptates, minima, ipsa provident veritatis explicabo dolore dolorem!</p>
<p>Sed, nostrum? Quia nisi ratione quam nesciunt rem blanditiis sunt tempore deserunt quos numquam exercitationem repellat libero quae nostrum nihil repudiandae dolorum eius magni, minus qui architecto doloribus ad. Corporis.</p>
<p>Eos minima, aspernatur deserunt excepturi ipsum iusto? Amet molestiae expedita magni cupiditate, ratione iste modi laudantium soluta, possimus deserunt commodi sit perspiciatis totam ut alias odio eius sunt nam culpa.</p>
<button id="fixed">Click to fix</button>
<button id="unfixed">Click to unfix</button>
<p>Tempora alias in laudantium quos officiis officia illum voluptatum facere sed voluptatem nisi id ex similique placeat ipsa dolores molestias consequatur consectetur, rerum minus! Distinctio dolore commodi nihil similique? Excepturi.</p>
<p>Tenetur repellat dolorem adipisci aspernatur? Expedita cupiditate quaerat, libero ad iusto in vel suscipit magni possimus aliquid culpa soluta rem sunt? Autem ratione ipsam quia quo facilis rem veritatis perferendis?</p>
<p>Culpa libero quia et voluptate rem, magnam iusto nesciunt voluptatibus non dolores voluptatum nihil aperiam, nemo neque. Ad asperiores sequi pariatur dolor rerum illo nisi nam temporibus explicabo, blanditiis hic.</p>
<p>Numquam, officia aut! Officiis non delectus error cum a voluptatem consequatur expedita quaerat amet provident soluta, totam facere incidunt voluptatum nam at. Quia, asperiores molestiae. Quis libero odit quisquam ipsa.</p>
<p>Earum hic deleniti, sit ea consequatur vitae dolorem facere deserunt sunt doloremque commodi, voluptate perspiciatis. Illum dolore temporibus hic blanditiis repudiandae fugiat natus? Amet architecto totam inventore asperiores aliquid molestiae?</p>
<p>Dolore dignissimos nesciunt enim exercitationem, eligendi nihil itaque laudantium aperiam adipisci tenetur ipsam esse eos, perferendis, at maiores. Esse facilis tenetur suscipit iste atque officia, beatae fuga ut iure laborum.</p>
<p>Ipsum voluptatum tempore adipisci sed! Perferendis est eius sed odio fuga. Ea culpa, modi optio laboriosam cupiditate nesciunt, necessitatibus tenetur corporis officia libero quis dolores iure obcaecati ab voluptatem quae.</p>
<p>Voluptate, dignissimos dolor nam animi et eligendi commodi nesciunt minima veritatis facilis ullam hic aperiam perspiciatis itaque molestias ex laboriosam a, deleniti enim ratione autem magnam? Iure obcaecati nisi aspernatur.</p>
<p>Praesentium harum, cum quibusdam aliquid sed laboriosam facilis ipsa iure officia modi dicta possimus consequatur adipisci tempore qui natus eaque beatae laudantium illo nihil iste blanditiis architecto eius. Tenetur, molestias!</p>
<p>Mollitia molestiae voluptatem vero, sed quod aliquid possimus quae quas minima neque facere cumque, dicta temporibus cum ipsum culpa minus? Commodi numquam architecto maiores recusandae sapiente ratione dolore quam facilis!</p>
<p>Esse quis quibusdam quos saepe dicta sequi, animi iure nostrum officia qui, aliquam a assumenda reiciendis odit soluta nesciunt amet ea? Voluptas saepe deleniti quae. Ullam maiores aliquid excepturi repellat!</p>
<p>Fuga nulla quae, ex eaque sit labore officiis error? Saepe, laborum! Impedit mollitia quidem perspiciatis eaque, quas velit sint expedita eum facilis veritatis ad quia dicta ab, labore quos temporibus?</p>
<p>Assumenda odio voluptatibus nulla quaerat temporibus, rerum veritatis consectetur ullam dolores aspernatur praesentium sint et delectus dicta. Mollitia repellat officia officiis explicabo nostrum deserunt ipsam, minima, at earum facere laudantium!</p>
<p>Veniam, labore odit. Eligendi ex voluptates ad ut magnam est et, praesentium, facere reiciendis libero sunt officia officiis velit? Aspernatur blanditiis sequi modi cumque molestiae, tenetur autem voluptatibus explicabo repellat?</p>
<p>Necessitatibus aperiam quo maiores, laudantium ipsum vero consectetur nam mollitia obcaecati commodi fuga doloribus quae repudiandae magni in dolorum rem quisquam ea porro perferendis animi quas nostrum dicta dolor. Eum.</p>
<p>Tenetur sit inventore, iure adipisci, aspernatur repellat odio quas, neque minima quae praesentium itaque excepturi perspiciatis? Dignissimos cumque, ad quae quidem magni at magnam totam vel quaerat nesciunt corrupti placeat.</p>
<p>Suscipit repudiandae fugiat harum iusto cumque minus atque consequuntur voluptatibus? Aliquam neque doloribus magnam repellat voluptates incidunt suscipit, eos aut, vero officiis voluptas possimus ipsam itaque quam hic optio nemo.</p>
<p>Veritatis, harum quaerat tempore sed nisi doloribus molestiae itaque officia voluptas officiis accusantium commodi totam incidunt illo odio saepe! Facere fugit beatae adipisci dolor, laboriosam odit laudantium cupiditate quas nesciunt.</p>
<p>Iure deleniti vitae illo, est repellat quo aliquid officia dolor vero quisquam nihil. Pariatur nobis corporis eius nemo, adipisci incidunt repellendus odio voluptate eligendi esse fugiat maxime asperiores perferendis. Eius.</p>
<p>Provident mollitia similique, praesentium illum quidem voluptates iure libero tempora iste ullam fugit distinctio deserunt dicta ducimus qui ex voluptatum reiciendis officiis quos enim! Natus illo voluptatum iusto obcaecati quibusdam?</p>
<p>Nisi delectus voluptatum necessitatibus quod iste? Molestias velit rerum quibusdam itaque perferendis nesciunt culpa eos quaerat perspiciatis. Unde corporis voluptas culpa dignissimos nam velit autem. Sit eveniet ex tempora autem.</p>
<p>Rerum culpa aspernatur modi ipsum sapiente voluptas, delectus voluptatem eligendi eius. Quidem, culpa suscipit, veniam officia consequatur perspiciatis debitis, nihil at ab iure necessitatibus atque laudantium et eius autem quasi?</p>
<p>Provident cumque, veniam harum vero voluptatem eligendi, saepe nulla temporibus nihil similique fugit! Maxime quis ducimus deleniti, sint inventore tempora adipisci exercitationem consequuntur saepe iusto facere totam mollitia reiciendis fugit.</p>
<p>Enim quae sunt eius consectetur, aliquam ratione dolorum tenetur molestias eaque et animi, impedit alias omnis id optio in amet reprehenderit quam odio porro ipsum. Pariatur voluptatem earum aliquid nostrum?</p>
<p>Asperiores exercitationem officia sapiente odit architecto error saepe autem non aperiam deserunt enim unde vitae suscipit neque, nulla incidunt ratione possimus nemo dicta mollitia? Ullam nostrum ipsum suscipit repellat tenetur.</p>
<p>Possimus porro labore, voluptatum saepe inventore repellat nisi, natus impedit illo tempora nostrum corporis recusandae ipsam explicabo qui quae dolor, consequatur aliquid beatae ad voluptate voluptas. Sunt omnis dolorem tempora.</p>
<p>Minus, odio? Inventore, magni. Laudantium perspiciatis aut quas molestiae quae alias neque natus voluptate eveniet odit exercitationem, officiis, aliquid excepturi nihil. Et architecto modi, fugit fuga adipisci assumenda nesciunt! Neque?</p>
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>
I've this code :
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header span').animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur
sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo.
Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate
fugit.</div>
</main>
When I scroll, the <span>Test</span> appears from top to bottom as I want.
But when I scroll to the top of the page, I want that span to move from bottom to top like its initial state.
Thanks for your help !
You have to stop the currently-running animation on the matched elements.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header span').stop().animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').stop().animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo. Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate fugit.</div>
</main>
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();
});
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>