CODEWITHSUNDEEP
javascripthtml
Typewar
Typewar

Reputation: 983

How to keep scroll position on redirect in Javascript / HTML

I'm currently working on a mp3 player website for a local server. It includes a "player" and a list of songs underneath.

The issue is when redirecting to another song (either via clicking or javascript redirect), it scrolls to the top of the page. It's quite annoying when I'm far down the list and clicks on a song.

It keeps the position when refreshing the page, but not with redirect.

The url looks like this:

http://192.168.1.130/music/listen.php?id=SongName

The only thing that changes during a redirect is the song name for the id.

For the redirect itself, it's either a click or JavaScript that does the action.

HTML:

<tr>
    <td><a href="/music/listen.php?id=AnotherSong">AnotherSong</a></td>
    <td>11.04.2019 15:52</td>
</tr>

JavaScript

window.location.href = "/music/listen.php?id=AnotherSong";

Are there any JavaScript / HTML features that keeps the scrolling position? Or would I maybe need to store the scrolling position somewhere and set the position again after the redirect has been done?

Upvotes: 1

Views: 5903

Answers (2)

Rounin
Rounin

Reputation: 29463

Maintaining Y Offset Position when redirecting on the same page

No javascript needed.

Simply use the # anchor.

If a page contains:

<h2 id="section-heading-1">

// [... CODE HERE...]

<h2 id="section-heading-2">

// [... CODE HERE...]

<h2 id="section-heading-3">

Then the links:

  • <a href="#section-heading-1">
  • <a href="#section-heading-2">
  • <a href="#section-heading-3">

Will link to the various <h2> section headings.

Maintaining Y Offset Position when redirecting to another page

One approach would be to use localStorage.

You can apply an onscroll event to the window (with throttling) and repeatedly update the y-offset value in localStorage.

Then, whenever a new page loads, you can have the browser refer to localStorage and, if it finds a y-offset value, adjust the page scroll within the browser viewport.

Working Example:

// ORIGIN PAGE
// ===========

// Save Y Offset Position to localStorage
const recordVerticalOffset = () => {

  localStorage.setItem('pageVerticalPosition', window.scrollY);
}

// Only save window position after scrolling stops
const throttleScroll = (delay) => {

  let time = Date.now();

  const checkScroll = setInterval(() => {

    if (Date.now() > (time + delay)) {

      clearInterval(checkScroll);
      return recordVerticalOffset();
    }
  }, 300);
}

// Scroll Event Listener
window.addEventListener('scroll', throttleScroll(1000));


// DESTINATION PAGE
// ================

const repositionPage = () => {

  let pageVerticalPosition = localStorage.getItem('pageVerticalPosition') || 0;

  window.scrollTo(0, pageVerticalPosition);
}

window.addEventListener('load', repositionPage);

Upvotes: 5

RezaGhahari
RezaGhahari

Reputation: 413

You can use jQuerys .animate(), .offset() and scrollTop. Like

$(document.body).animate({
'scrollTop':   $('#anchorName').offset().top}, 2000);

example link: http://jsbin.com/unasi3/edit

If you don't want to animate use .scrollTop() like

$(document.body).scrollTop($('#anchorName').offset().top);

or javascripts native location.hash like

location.hash = '#' + anchorid;

Upvotes: 2

Related Questions