HTML5 History + ScrollTop

[PWaddict]

Hello! I'm using the following code to ajaxify my website with HTML5 History. It works great with back/forward broswer's buttons but how can I make it load ONLY new pages with scrollTop(0); ? If the back/forward broswer's buttons pressed it should use the saved scroll position as it's currently happens.

$(function(){
	var replacePage = function(url) {
		$.ajax({
			url: url,
			type: 'get',
			dataType: 'html',
			success: function(data){
				var dom = $(data);
				var title = dom.filter('title').text();
				var html = dom.filter('.ajax-container').html();
				$('title').text(title);
				$('.ajax-container').html(html);
			}
		});
	}

	$(document).on('click', 'a:not(.external)', function(e){
		history.pushState(null, null, this.href);
		replacePage(this.href);
		e.preventDefault();
	});

	$(window).bind('popstate', function(){
		replacePage(location.pathname);
	});
});

 

[PWaddict]

bump

[abdus]

You can use localStorage to save and restore scroll position. Something to start with: (not tested)

function saveScroll(href) {
    // save current scroll position for this page
    localStorage.setItem('scroll__' + href, window.scrollY);
}

function restoreScroll(href) {
    // restore previous scroll or scroll to top
    let scroll = localStorage.getItem('scroll__' + href);
    $('html, body').animate({
        scrollTop: scroll ? scroll : 0
    }, 10);
}

window.addEventListener('beforeunload', function (e) {
    // remove scroll position
    localStorage.removeItem('scroll__' + location.pathname);
});


$(document).on('click', 'a:not(.external)', function (e) {
    saveScroll(this.href);

    history.pushState(null, null, this.href);
    replacePage(this.href);
    e.preventDefault();
});

$(window).bind('popstate', function () {
    replacePage(location.pathname);
    restoreScroll(location.pathname);
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[PWaddict]

@abdus It doesn't work and I don't know how to modify it but thanks anyway!

[PWaddict]

Here is my best solution so far. 

Now, when I click on the "a:not(.external)" links the pages are always load with "scrollTop(0)" and when I use the browser's back/forward buttons "popstate" I always get the saved scroll position. 

There is only 1 tiny problem with the "popstate". Once I press the browser's back/forward buttons I get instantly the saved scroll position on the current page and then the page gets replaced with the correct one. How can I make it to get the scroll position ONLY when the page gets replaced and not before?

$(function() {
		
	$(document).on('click', 'a:not(.external)', function(e) {
		
		var replacePage = function(url) {
			
			$.ajax({
				url: url,
				type: 'get',
				dataType: 'html',
				success: function(data) {
					$(window).scrollTop(0);
					var dom = $(data);
					var title = dom.filter('title').text();
					var html = dom.filter('.ajax-container').html();
					$('title').text(title);
					$('.ajax-container').html(html);
				}
			});
			
		};
		
		history.pushState(null, null, this.href);
		replacePage(this.href);
		e.preventDefault();
		
	});
	
	$(window).on('popstate', function() {
		
		var replacePagePopstate = function(url) {
			
			$.ajax({
				url: url,
				type: 'get',
				dataType: 'html',
				success: function(data) {
					var dom = $(data);
					var title = dom.filter('title').text();
					var html = dom.filter('.ajax-container').html();
					$('title').text(title);
					$('.ajax-container').html(html);
				}
			});
			
		};
		
		replacePagePopstate(location.pathname);
		
	});
});