[英]How to not showing the #id in URL with cferdinandi/smooth-scroll
我正在使用cferdinandi的smooth-scroll軟件包,但無法弄清楚如何使用其他選擇器而不是ID,因此它不會顯示在URL中。 例如,
我想要的是: example.com
,而不是: example.com/#1
我所做的是在要滾動到的div
插入一個id
,並將相同的id
放入<a>
元素的href
中。
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth- scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>
<script>
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 800
});
</script>
...
<a href="#1">About</a>
...
...
<section id="1">
This is section about
</section>
...
它具有功能,只是我試圖通過不顯示ID來使URL更好。
我不知道為什么錨網址這么困擾您。 當人們想要在您的網站上共享特定內容時,這很有用。
但是,如果您真的想要一種干凈的方法,請嘗試以下方法:
function goto(id) { document.getElementById(id).scrollIntoView(); }
html { /* You don't need any library to achieve smooth scroll */ scroll-behavior: smooth; }
<!-- polyfill for scroll-behavior: smooth; --> <script src="https://cdn.jsdelivr.net/npm/scroll-behavior-polyfill@2/dist/index.min.js"></script> <a href="javascript: void(0)" onclick="goto('1')">Go to 1</a> <a href="javascript: void(0)" onclick="goto('2')">Go to 2</a> <a href="javascript: void(0)" onclick="goto('3')">Go to 3</a> <a href="javascript: void(0)" onclick="goto('4')">Go to 4</a> <a href="javascript: void(0)" onclick="goto('5')">Go to 5</a> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <label id="1">One</label> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <label id="2">Two</label> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <label id="3">Three</label> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <label id="4">Four</label> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <label id="5">Five</label>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.