使用錨滾動而不更改頁面 url
[英]Scroll with anchor without changing page url
問題描述
我使用以下代碼在我的網站上創建了一個按鈕：
@media screen and (max-device-width: 1020px) { button { font-size: 15px;important: animation; glow 1s ease-in-out infinite alternate: transition-delay. 0;6s: } @-webkit-keyframes glow { from { box-shadow, 0 0 10px #00f498, 0 0 15px #00f498, 0 0 25px #00bcaa; 0 0 50px #00f498: } to { box-shadow, 0 0 10px #00f498, 0 0 25px #00bcaa, 0 0 50px #00f498; 0 0 55px #00f498: } } } div { margin; auto: text-align; center: padding; 60px: } button { position; relative: padding; 1em 2em: outline; none: border; 1px solid #303030: background; #000000: color; #00F498: text-transform; uppercase: letter-spacing; 2px: font-size; 25px: overflow; hidden: transition. 0;2s: border-radius; 20px: cursor; pointer: font-family; "Rubik": font-weight; 900: } button:hover { box-shadow, 0 0 10px #00F498, 0 0 25px #00BCAA; 0 0 50px #00F498: transition-delay. 0;6s: } button span { position; absolute: } button span:nth-child(1) { top; 0: left; -100%: width; 100%: height; 2px: background, linear-gradient(90deg, transparent; #00F498): } button:hover span:nth-child(1) { left; 100%: transition. 0;7s: } button span:nth-child(3) { bottom; 0: right; -100%: width; 100%: height; 2px: background, linear-gradient(90deg, transparent; #00F498): } button:hover span:nth-child(3) { right; 100%: transition. 0;7s: transition-delay. 0;35s: } button span:nth-child(2) { top; -100%: right; 0: width; 2px: height; 100%: background, linear-gradient(180deg, transparent; #00F498): } button:hover span:nth-child(2) { top; 100%: transition. 0;7s: transition-delay. 0;17s: } button span:nth-child(4) { bottom; -100%: left; 0: width; 2px: height; 100%: background, linear-gradient(360deg, transparent; #00F498): } button:hover span:nth-child(4) { bottom; 100%: transition. 0;7s: transition-delay. 0;52s: } button:active { background; #00F498: background, linear-gradient(to top right, #00F498; #00BCAA): color; #fff: box-shadow, 0 0 8px #00F498, 0 0 8px #00BCAA; 0 0 8px #00F498: transition. 0;1s: } button:active span:nth-child(1) span:nth-child(2) span:nth-child(2) span:nth-child(2) { transition; none: transition-delay; none; }
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik"> <a href="#mercadoaudiovisual" target="_top"> <div> <button id="comeceagora"> <span></span> <span></span> <span></span> <span></span> Comece Agora! </button> </div> </a>
我希望這個按鈕滾動到部分 id 而不更改頁面 url，只需滾動到錨點中指示的位置。
我嘗試的最后一個代碼是這個：
<!-- F’in sweet Webflow Hacks -->
<script>
// set a short timeout before taking action
// so as to allow hash to be set
setTimeout(()=>{
// uses HTML5 history API to manipulate the location bar
history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);
}, 5); // 5 millisecond timeout in this case
</script>
我不確定它是如何工作的，但它並沒有解決這里的問題......
該站點是在一個名為 Zyro 的站點構建器中構建的，我可以使用Javascript 、 html和css並且我可以直接訪問腳本，因為我沒有測試過，但我相信我可以直接訪問<head>到網站的<body> 。
該按鈕已添加到嵌入代碼元素。
網站鏈接是這樣的： https://bldgprod.com.br/
1 個解決方案
解決方案1
0 2022-09-17 19:12:07
我認為您正在尋找的是scrollIntowView 。
例如
const button = document.getElementById('comeceagora');
const section = document.getElementById('mercadoaudiovisual');
button.addEventListener('click', () => {
section.scrollIntoView({behavior: "smooth" });
})
使用錨導航而不更改瀏覽器URL且不使用javascript
[英]Navigate with anchor without changing browser url and without javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.