After dedicating numerous hours to this task and being a newcomer to JavaScript/JQuery, I am still unsure of how to achieve the following:
I have implemented a "back to top" anchor link in the footer of my pages that directs users back to the header. I am aware of CSS code that enables smooth scrolling animation:
html {
scroll-behavior: smooth;
}
However, I have come to realize that this feature does not function as intended in Safari.
According to the CSS Tricks website (https://css-tricks.com/snippets/jquery/smooth-scrolling/), there exists a JavaScript alternative to the aforementioned CSS solution:
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
The question now arises: How and where should I incorporate this into my link/page? My assumption is that I would want to modify top: 0,
Here is an example of my HTML structure:
<header id="top">.... </header>
<footer>
<a href="#top"><img class="to-top" src="resources/arrow.svg"></a>
</footer>
UPDATE I have attempted the following approach, but unfortunately, it did not yield the desired outcome. Any insights on what may be causing this issue?
<footer>
<a href="#top" onclick="window.scroll({ top: 0, behavior: 'smooth' })"><img class="to-top" src="resources/arrow.svg"></a>
</footer>