Effortlessly glide to the top of the webpage

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>

Answer №1

To trigger the scroll to top functionality, utilize the onclick-Event:

<header id="top">....</header>
<div style="background-color: red; height: 1200px"></div>
<footer>
  <a style="cursor:pointer;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"><img class="to-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Feather-arrows-arrow-up.svg/24px-Feather-arrows-arrow-up.svg.png"></a>
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the time increment dynamically within the dropdown menu

I have a challenge to make a dynamic dropdown field that adjusts based on the value of a previous input field. There is a dropdown for selecting length, with options like 30 min., 60 min., and 90 min.. Additionally, there are input fields for startTime and ...

html Comparison of Documents

My goal is to compare HTML documents to see if they have the same tags in the same arrangement, regardless of different inner text and attribute values. I am only interested in comparing the general tag structure, such as: <html> <head> </h ...

Update the chosen option in a dropdown list with jQuery and javascript

I need to set the value of a column in a repeater so that once it's assigned, the column will display the current selection from the dropdown. I have the correct value to assign in $('#myname_' + rowIndex).text(), but when I try to assign t ...

Guide for adding an OnClick event to a MatTable row:

I am looking to add functionality for clicking on a specific row to view details of that user. For instance, when I click on the row for "user1", I want to be able to see all the information related to "user1". Here is the HTML code snippet: <table ma ...

Is there a way to efficiently center an image within an HTML document using HtmlAgilityPack?

I recently created a basic HTML document using the HtmlAgilityPack, which includes an embedded image in base64 format. Dim myDocument As New HtmlDocument() Dim pageContent As String = "<!DOCTYPE html> <html> <body> <img src=""data:im ...

Angular-template static functions refer to functions that do not require an

Our project utilizes the linting-config provided by AirBnB. There is a rule that stipulates class methods must utilize this or be declared as static. While this rule theoretically makes sense, it seems to present challenges within an angular context. Consi ...

Tips for using an array as a jQuery selector in JavaScript

Managing an element with an array id id="x[]" can be tricky when it comes to dynamically changing content based on database entries. This specific element is essentially a delete button for removing table rows from the database. <div align="center" id= ...

If the user decides to change their answer, the current line between the two DIVs will be removed

After clicking on two DIVs, I created two lines. Now, I am facing an issue with resetting the unwanted line when changing my answer. To reset the line, you can refer to the code snippet below: var lastSelection; ...

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

Tips for concealing select options after choosing with select picker?

Our establishment features three distinct rooms, each offering three identical options that users can choose from. https://i.sstatic.net/Jx4Me.png To illustrate, if a user named John selects option one in the first room, that same option will be hidden w ...

How to automatically adjust select view in AngularJS as model value is updated

My select element is structured as follows: <select data-ng-model="transaction.category" class="form-control" data-ng-options="category.name group by category.parent for category in categories" required> </ ...

What can be done to eliminate the narrow gap between my <input> and <span> components?

Here is what I have: <input style="width: 20px" data-ng-model="row.number" type="text" /> <span style="width: 20px">-</span> Is there a way to eliminate the small gap between the <input> and <span>, as well as centering the ...

Using NodeJS and Express: redirection fails to load the specified endpoint

My current project involves a simple e-commerce web application running on localhost built with nodejs and express. Admins are required to register in order to gain access to functionalities such as adding, editing, and removing products from the product l ...

Unable to find and load the specified css-font formats (svg, eot, woff, woff2, and ttf) using webpack

Looking to incorporate a unique font into my project: @font-face { font-family: 'bikeshop'; src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833'); src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') ...

Struggling to display the preloader animation while waiting for the render.com server to start up (using the free tier web service)

My choice for deploying dynamic websites is render.com and I am currently using their free tier. The issue with this free service is that Render spins down the web service after 15 minutes of inactivity, resulting in a delay when it needs to spin back up u ...

Searching MySQL data with ng-repeat filter

I am facing a challenge in populating a div tag with ng-repeat and data from a MySQL database. My intention is to utilize ng-repeat for its filtering capabilities in the future. The dilemma lies in the integration of Angular and SQL. My desired HTML struc ...

What are some ways to replicate the experience of a lengthy document loading?

I am interested in conducting tests on JavaScript code that runs both before and after the document is fully loaded. Is there a way to purposely delay my document's loading process (for instance, by 10 seconds) so I can easily observe the effects occ ...

Animation does not occur after the stop() function is executed

My goal is to create a functionality where, upon moving back to the grey content box after leaving the button, the slideUp animation stops and the content slides down again. This works seamlessly with jQuery 1.x (edge), but when I switch to jQuery 1.10, th ...

Designing a dynamic button with changing colors using html and css

Is there a way to design a button with a starting color of red, but changes to orange when the mouse hovers over it? I am looking to add this type of button to my website. ...

Typescript method fails to compile due to an indexing error

Imagine you're trying to implement this method in Typescript: setResult(guId: string,fieldname: string, data:Array<UsedTsoClusterKey>) { let octdctruns: OctDctRun[] = [...this.octDctRuns]; const index = octdctruns.findIndex((o) => o.guid ...