Automatic Scroll to top of page on Load

[JimmyH]

Hi there,

I have a problem when the page has finished loading, that the page scrolls to the top away from where the user is viewing content in a drop-list close to the bottom of the page.

I do not want the page to scroll to the top of the page. Or Alternatively, I would like the page to scroll to the position (component) where the use was once the page has loaded.

I have tried the following:

1) On click to open the drop-list, I try to set the location using:
var scrollPosition = $(Tour_Drop).scrollTop;
localStorage.setItem("ScrollTo", scrollPosition);

This appears to work as a position of the Tour-Drop is saved.

2) Then on the page load event, I try to get the page to move to the location saved to storage using:
var scrollPosition = localStorage.getItem("ScrollTo");
$(window).scrollTop(scrollPosition);

I have also tried using window.scrollBy(0,scrollPosition);

Unfortunately nothing happens.

Your help would be greatly appreciated.
thanks
Jimmy

[Serhii Kulibaba]

Hello,

Please use that JS code on the success event after generation the list items.or on the page show event, if you use a static list.

The event "Load" is triggered before the page is done so the list of items is not available.

[JimmyH]

Hi Sergiy,

Unfortunately, it still does not work. When all the content is loaded, the page scrolls to the top and does not remain where the user is viewing.

I have applied the follow javascript on-click for the button that opens the custom dropbox.

var scrollPosition = Appery("Tour_Drop").scrollTop;
localStorage.setItem("ScrollTo", scrollPosition);

The following is saved to storage:

function ( val ) {
return access( this, function( elem, method, val ) {
var win = getWindow( elem );

Code: Select all

if ( val === undefined ) { 
 return win ? win[ prop ] : elem[ method ]; 
} 

if ( win ) { 
 win.scrollTo( 
  !top ? val : window.pageXOffset, 
  top ? val : window.pageYOffset 
 ); 

} else { 
 elem[ method ] = val; 
} 

}, method, val, arguments.length, null );
}

As you suggested, I added the following js on page show.
var scrollPosition = localStorage.getItem("ScrollTo");
console.log("Got page location:"+scrollPosition);
$(window).scrollTop(scrollPosition);

It is the last event of the on page events.

Any more ideas?

Thanks
Jimmy

[Serhii Kulibaba]

Unfortunately debug the custom code is something outside the scope of standard Appery.io platform support. You may consider purchasing Advisory Pack to get more in-depth help on this question. Here is more information about Advisory Pack (http://appery.io/services/#Advisory_Pack).

[JimmyH]

Hi Sergiy,

I will keep my question simple then.

How do I stop my page scrolling to the top once all content has loaded?

This should be within your service, as there are many question re js through this service.

Thanks
James

[JimmyH]

I figured it out.

On click of the drop-box, i ran the following JS.

window.addEventListener("load", myFunction);

Code: Select all

 function myFunction() { 

setTimeout( Scroll, 100 );  

 function Scroll() { 
 var Height = $( window ).height(); 
 window.scrollBy(0, Height); 
 console.log("Scroll Height:"+Height); 
 console.log("All resources finished loading!"); 
 } 
 } 

I realised I needed to use a timeout as it needed a slight delay to work.

Any better ideas?

[Serhii Kulibaba]

Thank you for update! Glad it works now!

What kind of content it is? If there are a lot of images we can't control their loading, if it is a simple text (list items, grid items), you can run some code on the service success event. Anyway, you can use a timeout as an option.