I'm trying to make a button on my page lead to a session specified in the code, but I've tried several alternatives and none of them worked.
The code I'm currently using is this one:
<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>
The site was created in a site editor, so I don't have direct access to the HTML, but I do have access to the <head>.
As a base, the website editor support team helped me create a sticky side banner that leads to the footer of my page, the code used was this one:
<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>
The code of this banner was inserted in the <head> of the site.
I'm pretty new to JavaScript, I'm trying to understand and evolve, but I still have difficulty, so please, I ask that the explanation be detailed so that I can understand what to do and so that I can learn to solve other things .