Implement ScrollTo() on the page that has just been opened

Question

Implement ScrollTo() on the page that has just been opened

I am exploring a method to implement the scrollTo() function on a new page after a specific link has been clicked. Unfortunately, utilizing window.onload is not suitable for my scenario as I only want the scrolling action to occur when the page is accessed through a particular link.

My goal is to have the home page redirect and smoothly scroll to the 'other' section of the services page:

HTML:

<a onclick="otherServices">Other Services</a>

JavaScript:

function otherServices() {
    window.location = "/services";
    win = window.location;
    setTimeout(win.scrollTo(0,document.body.scrollHeight), 3000);
}

Ideally, I would like to steer clear of using jQuery if possible.

javascript scroll

Answer 1

Answer №1

you can navigate to a specific section on the website by using hash.

website navigation

<a href="/products#top">Top Products</a>

product page script

window.onload = function () {
  if (window.location.hash == '#top') {
    window.scrollTo(0,document.body.scrollHeight);
  }
}

Alternatively, you can achieve the same effect without JavaScript by setting the hash in the link to the Id of the desired element.

Answer 2

you can navigate to a specific section on the website by using hash.

website navigation

<a href="/products#top">Top Products</a>

product page script

window.onload = function () {
  if (window.location.hash == '#top') {
    window.scrollTo(0,document.body.scrollHeight);
  }
}

Alternatively, you can achieve the same effect without JavaScript by setting the hash in the link to the Id of the desired element.

Answer 3

Answer №2

To achieve the desired functionality, you can implement a script that executes on page load and checks if the current page is the services page. If it is, then it scrolls to a specific section on the page (referred to as "somewhere").

For the homepage:

<a href="/services">Other Services</a>

For the services page:

window.onload = function () {
  if (window.location.pathname === '/services') {
    window.scrollTo(0, somewhere)
  }
}

Update: Upon reevaluation of the issue, a better solution has been found:

For the homepage:

<a href="/services#section-id">Other Services</a>

For the services page:

<section id="section-id">Other Services</section>

The browser will handle the scrolling automatically based on the anchor tag or section ID reference provided.

Answer 4

To achieve the desired functionality, you can implement a script that executes on page load and checks if the current page is the services page. If it is, then it scrolls to a specific section on the page (referred to as "somewhere").

For the homepage:

<a href="/services">Other Services</a>

For the services page:

window.onload = function () {
  if (window.location.pathname === '/services') {
    window.scrollTo(0, somewhere)
  }
}

Update: Upon reevaluation of the issue, a better solution has been found:

For the homepage:

<a href="/services#section-id">Other Services</a>

For the services page:

<section id="section-id">Other Services</section>

The browser will handle the scrolling automatically based on the anchor tag or section ID reference provided.

Implement ScrollTo() on the page that has just been opened

Answer №1

Answer №2

Similar questions

Jade: modify the text box input to show = " ..."

The basic Node.js API for greeting the world encountered a connection failure

JavaScript and the importance of using commas in arrays

In order for jQuery autocomplete to function properly, the corresponding <input> tag must be utilized at least once after launching the browser

Tips for seamlessly incorporating React Epub Reader into your next js project

Eliminate the hovering effect from images that are hyperlinked

What is the best method for specifying CSS styles for a Vue.js component during the registration process?

Form an object using elements of a string array

Using jQuery to append content does not automatically attach an AJAX event listener to the newly appended element

Is it possible to access all the variables within a specific scope or explore different scopes using console.log?

Tips for structuring commands in Discord.js

Ext JS - A grid cell containing varying values, accompanied by a selection of combo boxes

Lens Flare Troubles in Three JS

Prevent duplicate rectangles by cleaning up dirty rectangles

Ways to expand Sequelize model

Steps to develop a countdown timer for every iteration of sending an API request using a specified list

Displaying a clock using PHP

How can I dynamically show a div in VueJS depending on the selected option?

Vue.js: EventBus.$on is not properly transmitting the received value

Error: The function could not be located