我試圖讓我的頁面上的一個按鈕導致代碼中指定的會話，但我嘗試了幾種替代方法，但都沒有奏效。
我目前使用的代碼是這個：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
<div>
<button id="comeceagora">
<span></span>
<span></span>
<span></span>
<span></span> Comece Agora!
</button>
</div>
<style>
@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;
}
</style>
<script>
scrollTo = (element) => {
window.scroll({
behavior: 'smooth',
left: 0,
top: element.offsetTop
});
console
}
document.getElementById("comeceagora").addEventListener('click', () => {
scrollTo(document.getElementById("mercadoaudiovisual"));
});
</script>
該站點是在站點編輯器中創建的，因此我無法直接訪問 HTML，但可以訪問<head>.
作為基礎，網站編輯器支持團隊幫助我創建了一個粘性側面橫幅，指向我的頁面頁腳，使用的代碼是這樣的：
<script>
setTimeout(() => {
const newLink = document.createElement('a')
const text = document.createElement('p')
const arrow = document.createElement('span')
newLink.appendChild(arrow)
newLink.appendChild(text)
// Change this line to add text
arrow.innerHTML = "←"
text.innerText = "Formulário"
newLink.onclick = function () {
window.scroll(0,findPos(document.getElementById("download")));
}
newLink.classList.add('bannerSide')
const bodyTag = document.querySelector('body')
bodyTag.appendChild(newLink)
}, 500)
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop = obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
window.addEventListener('scroll', e => {
bannerSide.style.display = window.scrollY > 1000 ? 'flex' : 'none';
});
</script>
此橫幅的代碼已插入<head>該站點。
我對 JavaScript 很陌生，我正在努力理解和發展，但我仍然有困難，所以我要求解釋得詳細一點，以便我能理解該做什么，以便我可以學習解決其他問題事物 。
uj5u.com熱心網友回復：
我想知道是否沒有應用document.getElementById("comeceagora")事件處理程式，因為它是在 DOM 中可用該元素之前添加的。
這意味著 javascript 正在嘗試檢測對尚未加載的元素的點擊，因此它不知道在哪里附加。
如果這是問題，這應該可以解決。在這種情況下，我們將點擊處理程式附加到正文，因此無論點擊什么，它都會檢測到所有點擊。然后我們檢查單擊的內容是否具有您的按鈕的 ID，如果是，則運行 scrollTo 函式。這稱為事件委托。
document.body.addEventListener("click",function(e){
if(e.target.id === "comeceagora"){
scrollTo(document.getElementById("mercadoaudiovisual"));
}
});
uj5u.com熱心網友回復：
您可以使用<a href="">滾動到特定部分還是必須在其中完成js？
更新：特別想要一個按鈕而不是<a href="">. 不幸的是，沒有一些我做不到js。這是我能做的最好的復制<a href="">行為的button
onclick="window.location.href = '#comeceagora'">
html {
scroll-behavior: smooth;
}
div {
height: 120vh;
width: 80vw;
}
@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;
}
}
}
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;
}<h1>Hello World</h1>
<button onclick="window.location.href = '#comeceagora'">
scroll to comeceagora
</button>
<div></div>
<h1 id="comeceagora">comeceagora</h1>uj5u.com熱心網友回復：
您的代碼不起作用的原因是因為您沒有宣告scrollTo為函式。您還有一個console可能導致錯誤的空白陳述句。試試這個腳本：
const scrollTo = (element) => {
window.scroll({
behavior: 'smooth',
left: 0,
top: element.offsetTop
});
}
document.getElementById("comeceagora").addEventListener('click', () => {
scrollTo(document.getElementById("mercadoaudiovisual"));
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/508633.html