Hvernig gengur lífið dag frá degi? Er það í jafnvægi og allt eins og það á að vera? Er jafnvægi hvort sem litið er á veraldlega stöðu eða andlega? Lífið er eins og það er. Það er ekki alltaf sólskyn. Það koma reglulega lægðir með rok og rigningu. Við vitum að í heildar samhenginu er lægð hluti af vistkerfi að leita að jafnvægi. Stundum erum við stödd í miðju lægðarinnar. Þar er logn og gott veður, sama hvað gengur á þar sem stormurinn er mestur. Sama lögmál gildir varðandi þitt eigið líf. Ef þú ert í þinn miðju, þínum sannleik þá heldur þú alltaf jafnvægi átakalaust. Sama hvað gustar mikið frá þér þegar þú lætur til þín taka. Huldufólk hefur gefið okkur hugleiðslu sem hjálpar okkur að finna þessa miðju, finna kjarna okkar og sannleikann sem í honum býr. Þegar þú veist hver þú ert og hvers vegna þú ert hér, mun líf þitt vera í flæðandi jafnvægi. Hugleiðslan virkjar þekkinguna sem er í vitund jarðar og færir hana með lífsorkunni inn í líkama okkar. Þar skoðar hún hugsana og hegðunar munstrið og athugar hvort það myndar átakalausu flæðandi jafnvægi. Hinn möguleikinn er falskt jafnvægi sem hafa þarf fyrir að viðhalda með tilheyrandi striti, áhyggjum og ótta. Síðan leiðbeinir þessi þekking okkur að því jafnvægi sem er okkur eðlilegt. Við blómstrum átakalaust, líkt og planta sem vex átakalaut frá fræi í fullþroska plöntu sem ber ávöxt.

Whenever you have a website that prompts users to scroll down a lengthy amount – offering a button to scroll back to the top is a nice gesture!

In this hands-on guide, we will learn how to make an animated HTML/CSS/JS button to scroll to the top in Vanilla JavaScript.

Getting Started

We’ll be creating the functionality from scratch and styling it. Using a querySelector(), we’ll select the created button and toggle its visibility on and off based on where the user is on the page, and trigger an event to scroll to the top on each click.

If you’d like to read about creating a scroll-to-top in React, read our How to Scroll to Top in React with a Button Component!

Because the button is fixed to a certain location (bottom-right) using the CSS position attributes, the markup for this functionality may be inserted anywhere inside the body element of your HTML code:

<div className="scroll-to-top"> <span class="btn btn-position btn-style">^</i>
</div>

Once added, we can style the button and its parent <div>. We’ll fix the position of the button to the bottom right, offsetting it a little from the bottom and the right-hand side:

.scroll-to-top { position: relative;
} .btn-position { position: fixed; bottom: 40px; right: 25px; z-index: 20;
} .btn-style { background-color: #551b54; border: 2px solid #fff; border-radius: 50%; height: 50px; width: 50px; color: #fff; cursor: pointer; animation: movebtn 3s ease-in-out infinite; transition: all 0.5s ease-in-out; font-size: 40px; display: flex; justify-content: center; align-items: center; visibility: hidden;
}

We’ve set the visibility of this button to hidden by default, so that the button only appears when the user has scrolled down to a particular position(Y-axis) – we’ll do this by altering its property with JavaScript later. Finally, let’s add a sveima and some animation to the button so it doesn’t stand still:

.icon-style:hover { animation: none; background: #fff; color: #551b54; border: 2px solid #551b54;
} @keyframes movebtn { 0% { transform: translateY(0px); } 25% { transform: translateY(20px); } 50% { transform: translateY(0px); } 75% { transform: translateY(-20px); } 100% { transform: translateY(0px); }
}

Implementing the Logic

Now that the button is styled, and invisible – let’s implement the logic that makes it visible once the user scrolls down. We’ll select it via querySelector() and attach an EventListener to the element:

const scrollBtn = document.querySelector(".btn");

Now, based on the position of the window’s Y value (how much the user has scrolled vertically, starting at 0) – we’ll set the visibility of the element to "visible" or "hidden" if the Y value is below a certain threshold:

const btnVisibility = () => { if (window.scrollY > 400) { scrollBtn.style.visibility = "visible"; } else { scrollBtn.style.visibility = "hidden"; }
};

Now we have a function which, when called, checks whether the webpage has been scrolled down to 400, and sets the visibility of the button element to visible, else it sets it to hidden.

Finally – we’ll want to repeatedly call this function to repeatedly check the position and adjust the visibility accordingly. This is best done through an atburðahlustandi that triggers the function on each scrolling change:

document.addEventListener("scroll", () => { btnVisibility();
});

The last piece of code we’ll want to attach to an event listener is the logic to scroll the user back up programmatically when they click a button. The scrollToTop() virkni window instance does just that! We can set what the “top” is, by providing a Y coordinate, and can call the method on each "click" event on the button:

scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" });
});

That’s it! Try scrolling down the page – an animated button will appear. Once it does and you click it, you’ll smoothly be taken back to the top of the page:

Niðurstaða

Scrolling to the top of the page isn’t difficult – even with event listeners and animations! In this hands-on guide, we’ve learned how to implement the scroll-to-top functionality with Vanilla JavaScript and styled the button.

• Myntsmart. Besta Bitcoin og Crypto Exchange Evrópu.
• Platoblockchain. Web3 Metaverse Intelligence. Þekking aukin. ÓKEYPIS AÐGANGUR.
• CryptoHawk. Altcoin ratsjá. Ókeypis prufa.
• Source: https://stackabuse.com/scroll-to-top-in-vanilla-javascript/