Issue

This Content is from Stack Overflow. Question asked by Tyrone Hirt

I created a button on my website with this code:

@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>

I would like this button to scroll to the section id without changing the page url, just scroll to where it is indicated in the anchor.

The last code I tried was this one:

<!-- 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>

I’m not sure how it works, but it didn’t solve the problem here…

The site was built in a site builder called Zyro, I have the possibility to use Javascript, html and css and I have access to the <head>, but I believe the scripts i tested did not work because I don’t have direct access to the <body> of the site.

The button has been added to an embed code element.

The website link is this: https://bldgprod.com.br/

Solution

I think what you are looking for this is scrollIntowView.

for example

const button = document.getElementById('comeceagora');
const section = document.getElementById('mercadoaudiovisual');

button.addEventListener('click', () => {
  section.scrollIntoView({behavior: "smooth" });
})

This Question was asked in StackOverflow by Tyrone Hirt and Answered by Mina It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.