I can’t find solution how to slow down scrolling on my example. When i click wherever on my picture there are link that scrolling down to text. How can i slow it down on my example?
JDFiddleDemo HTML code:
<body onload="scrollInView()">
<img src="https://i.ibb.co/M6pJRry/kalendarium-22.png" width="1900" height="600" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="81,79,171,117" href="#1954" />
<area shape="rect" coords="142,146,334,204" href="#1954" />
<area shape="rect" coords="81,235,254,481" href="#1954" />
<area shape="rect" coords="255,234,378,407" href="#1958" />
<area shape="rect" coords="255,514,338,545" href="#1958" />
<area shape="rect" coords="315,427,483,466" href="#1958" />
<area shape="rect" coords="381,229,593,405" href="#1986" />
<area shape="rect" coords="595,243,799,403" href="#1995" />
<area shape="rect" coords="619,513,699,543" href="#1995" />
<area shape="rect" coords="678,430,821,463" href="#1995" />
<area shape="rect" coords="803,243,1058,412" href="#2001" />
<area shape="rect" coords="885,83,965,117" href="#2001" />
<area shape="rect" coords="935,143,1078,167" href="#2001" />
<area shape="rect" coords="1062,243,1288,410" href="#2009" />
<area shape="rect" coords="1135,429,1372,485" href="#2009" />
<area shape="rect" coords="1081,513,1167,541" href="#2009" />
<area shape="rect" coords="1292,236,1494,408" href="#2015" />
<area shape="rect" coords="1345,85,1424,115" href="#2015" />
<area shape="rect" coords="1389,147,1553,204" href="#2015" />
<area shape="rect" coords="1468,511,1548,546" href="#2018" />
<area shape="rect" coords="1498,225,1853,464" href="#2018" />
<area shape="rect" coords="1516,463,1643,486" href="#2018" />
<area shape="rect" coords="1419,411,1495,464" href="#2018" />
<area shape="rect" coords="1422,222,1494,232" href="#2018" />
<area shape="rect" coords="473,87,550,114" href="#1086" />
<area shape="rect" coords="521,147,679,186" href="#1986" />
</map>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="1954">
<strong>Odkrycie bakterii Lactobacillus acidophilus Er-2 317/402.</strong>Prof. Levon Akopovich Erzinkyan – naukowiec i wynalazca, dr n. technicznych i biologicznych, twórca Mikrobiologii Technicznej w Armenii – przeprowadza analizę smółki swojej wnuczki, pod kątem obecności bakterii kwasu mlekowego i odkrywa wyjątkowy szczep, wyróżniający się niezwykłą żywotnością i odpornością na antybiotyki, żółć i kwas.
</p>
<br>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="1958">
<strong>Pierwsze zastosowanie bakterii Lactobacillus acidophilus Er-2 317/402.</strong>Wnuczka prof. Erzinkyana trafia do szpitala z powodu ciężkiej infekcji jelitowej. Gdy dziewczynka nie reaguje na leczenie szpitalne, a lekarze rozkładają ręce, nie dając jej szans na przeżycie, prof. Erzinkyan wprowadza do jej leczenia bakterie Lactobacillus acidophilus Er-2 317/402. Dziewczynka zdrowieje, a szczep, który podano zostaje nazwany od jej imienia – Narine. Rok później Rząd Armenii wprowadza ten probiotyk jako obowiązkowy dodatek do mleka na oddziałach neonatologicznych i w przedszkolach. Dzięki niemu mleko staje się wartościowym zamiennikiem naturalnego pokarmu, a karmione nim dzieci nie chorują na schorzenia przewodu pokarmowego, mają lepszą odporność, fizjologię i metabolizm.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="1986">
<strong>Czarnobyl, rekomendacja WHO.</strong>Po wybuchu elektrowni jądrowej w Czarnobylu, Lactobacillus acidophilus Er-2 317/402 Narine, zostaje włączony do leczenia osób z dysbiozą. Wyniki badań pokazały, że bakteria przyczynia się do normalizacji flory jelitowej i poprawy stanu zdrowia leczonych osób. Pozytywne wyniki terapii zwracają uwagę Organizacji Zdrowia, która rekomenduje stosowanie szczepu Narine w tak ekstremalnych sytuacjach.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="1995">
<strong>Powstanie zakładu przy Instytucie.</strong>Na początku lat 90-tych, młody dr, Dilanyan Edward Karlenovich, staje przed groźbą poważnej operacji. Chcąc jej uniknąć, chwyta się ostatniej deski ratunku – zaczyna przyjmować Narine w postaci jogurtu (jedynej, dostępnej w tamtym czasie formie). Szybkość i efektywność działania „leku” na tyle go zdumiewa i fascynuje, że postanawia poświęcić się badaniom nad tą niezwykłą bakterią. Otwiera pierwszy na świecie zakład produkujący tabletki z oryginalną bakterią Narine. Zakład Vitaway LLC znajduje się w najbliższym sąsiedztwie Instytutu, w którym od początku przechowywany jest szczep.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="2001">
<strong>Badania w Japonii.</strong>Japońscy mikrobiolodzy z Institute Pasteur de Kyoto, przeprowadzają serię badań nad bakterią Lactobacillus acidophilus Er-2 317/402 Narine, odnosząc się do badań z 1987 roku, w których wykazali, że bakteria Narine indukuje produkcję interferonu – naturalnej substancji wytwarzanej przez komórki organizmu, odpowiedzialnej za wytwarzanie przeciwciał w celu zwalczania infekcji.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="2009">
<strong>Ujawnienie informacji o stosowaniu Narine przez radzieckich astronautów.</strong>W Wielkiej Brytanii, na jaw wychodzą informacje o stosowaniu Lactobacillus acidophilus Er-2 317/402 Narine przez radzieckich astronautów. Wcześniej, ujawnienie osiągnięć naukowych dotyczących szczepu Narine, nie było możliwe, ponieważ stanowiły one tajemnicę wojskową i były regulowane przez KGB.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="2015">
<strong>Otwarcie zakładu produkcji i innowacji w Japonii.</strong>Japończycy postanawiają wprowadzić produkty z bakterią Narine na swój rynek. W porozumieniu z armeńskim Vitaway LLC otwierają w Tokio zakład produkcyjny. Niestety mimo wielu przeprowadzonych badań nad bakterią i podjętych prób produkcji, nie odnoszą sukcesu. W końcu postanawiają zamawiać Narine bezpośrednio z Armenii i tak jest do dzisiaj.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id ="2018">
<strong>Powstanie polskiej marki NARUM.</strong>Michał Toczyłowski, prawnik i przedsiębiorca, szukając ratunku, dla jednego ze swoich synów, u którego zdiagnozowano zwiotczenie mięśni (skutek pewnych działań medycznych), trafia w rosyjskiej literaturze medycznej, na wzmiankę o niezwykłej bakterii Narine. Po wielomiesięcznych poszukiwaniach udaje mu się w końcu nawiązać kontakt z producentem w Armenii. Po doświadczeniu na sobie i najbliższych, niezwykłego działania probiotyku, postanawia sprowadzić te produkty na rodzimy rynek. Tworzy markę Narum i rozpoczyna współpracę z producentem z Armenii.
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
JS :
function scrollInView() {
const url = window.location.href;
const hashIndex = url.lastIndexOf("#");
const id = url.substr(hashIndex+1, url.length - (hashIndex+1));
const elem = document.getElementById(id);
if(elem) {
elem.scrollIntoView({ behavior: 'smooth'});
}
}
I have function scrollInView but it looks like not works on my example. How can i do that on my example to get slow scroll down animation?
Advertisement
Answer
There are some issues within your code. The scrollInView function is only called once on bodyLoad which has not the desired effect. Smooth scrolling between anchor is supported out of the box without using javscript.
You can acomplish this by adding this to your css.
html{scroll-behavior:smooth}
I would suggest to remove the scrollInView function. JS fiddle demo: https://jsfiddle.net/o0zps35w/