Forum | Appery.io

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

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.

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 );

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

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).

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

I figured it out.

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

window.addEventListener("load", myFunction);

 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?

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.