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 .
CodePudding user response：
I'm wondering if the document.getElementById("comeceagora") event handler isn't being applied since it's being added before that element is available in the DOM.
Which means the javascript is trying to detect clicks on an element that isn't loaded yet so it doesn't know where to attach.
If that is the problem, this should solve that. In this case, we attach the click handler to the body, so it will detect ALL clicks no matter what is clicked. Then we check to see if what was clicked has the ID of your button and if so, then run the scrollTo function. This is referred to as event delegation.
document.body.addEventListener("click",function(e){
if(e.target.id === "comeceagora"){
scrollTo(document.getElementById("mercadoaudiovisual"));
}
});
CodePudding user response：
can you use <a href=""> to scroll to a specific section or does it have to be done in js?
update:specifically wanted a button instead of <a href="">.
unfortunately i cant do it without some js. this is the best i can do to replicate <a href=""> behavior's for a 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>CodePudding user response：
The reason that your code does not work is because you did not declare scrollTo as a function. You also have a blank console statement that might be causing bugs. Try this script instead:
const scrollTo = (element) => {
window.scroll({
behavior: 'smooth',
left: 0,
top: element.offsetTop
});
}
document.getElementById("comeceagora").addEventListener('click', () => {
scrollTo(document.getElementById("mercadoaudiovisual"));
});