1

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?

Typewar
  • 825
  • 1
  • 13
  • 28
  • Possible duplicate of this: https://stackoverflow.com/questions/16388772/maintain-scroll-position-of-large-html-page-when-client-returns – johnmikelridzz Nov 30 '19 at 20:03

2 Answers2

5

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);
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • I tested the bottom example (As I would try to avoid using hashtags because of PHP doing the main code), and it seems a bit inconsistent. Sometimes it remembers the location, and other times it remembers the previous position. Do you know anything I should keep in mind to make this more "stable" ? – Typewar Dec 01 '19 at 03:55
  • In `throttleScroll`, the parameter `1000` represents a full second. You might want to change it to `500` milliseconds or `300` milliseconds. – Rounin Dec 01 '19 at 10:10
  • 1
    Alright, so it seems like it doesn't save the scroll position if I scroll "reasonably" fast. I was able to "fix" this by setting the delay to 10ms. I guess it's fine because the server is only used on the local network anyways. Thank you for helping me! – Typewar Dec 01 '19 at 21:19
2

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;
RezaGhahari
  • 405
  • 3
  • 9