javascript - 通过单击javascript减慢滚动页面
问题描述
在我的示例中,我找不到如何减慢滚动速度的解决方案。当我单击图片上的任何位置时,都有向下滚动到文本的链接。我怎样才能在我的例子中放慢速度?
JDFiddleDemo HTML 代码:
<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'});
}
}
我有函数 scrollInView 但它看起来不适用于我的示例。我怎样才能在我的例子中做到这一点来获得缓慢的向下滚动动画?
解决方案
您的代码中存在一些问题。scrollInView 函数仅在 bodyLoad 上调用一次,效果不理想。无需使用 javscript,即可直接支持锚点之间的平滑滚动。
您可以通过将其添加到您的 css 来完成此操作。
html{scroll-behavior:smooth}
我建议删除 scrollInView 功能。JS 小提琴演示:https ://jsfiddle.net/o0zps35w/
推荐阅读
- python-3.x - jupyter notebook 没有启动
- excel - 如何使一个单元格等于另一个单元格的前三行?
- typescript - 升级 NestJS 的清洁方法
- c - 不要在 C++ 2 中生成相同的随机数
- oracle - Oracle 9 数据库作为 SSRS 2017 版本 14.0 中的数据源
- c# - 通过在文本框中输入名称 C# 从 csv 文件中获取全部详细信息
- c++ - 如何在 PIMPL 惯用语后面的接口中隐藏包含自定义 typedef 的 API?
- reactjs - 如何使用 DataSearch 作为 Reactivesearch 的受控组件?
- android - Gson 在序列化时忽略枚举的自定义 @SerializedName 值
- javascript - 服务器端 python 返回一个 zip 文件以供下载