使用锚滚动而不更改页面 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.