CODEWITHSUNDEEP
javascriptjqueryjquery-scrollify
RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Scrollify - on page refresh remains the same section

Am using scrollify.js latest version for page scroll effect and updateHash and sectionName are set to false.

Here my issue is, post page refresh focus is on the same section where I left. For example let say am in 4th section, when I press F5 page has refreshed and landed on the same 4th section instead of landing in 1st section. Even Ctrl+F5 not helping in Chrome browser. Here is my code.

$('body').css('overflow', 'hidden');
$.scrollify({
  section: ".scroll-section",
  sectionName: false,
  interstitialSection: "",
  easing: "easeOutExpo",
  scrollSpeed: 1100,
  offset: 0,
  scrollbars: true,
  standardScrollElements: "",
  setHeights: true,
  overflowScroll: true,
  updateHash: false,
  touchScroll: true,
  before: function(index, section) {
    var className = '.' + $.scrollify.current().data('section');
    $('.sticky-left-nav').find('li').removeClass('active mb30');
    $('.sticky-left-nav').find(className).addClass('active mb30');

    if (index > 3) {
      $('body').removeAttr('style');
    } else {
      $('body').css('overflow', 'hidden');
    }
  },
  after: function() {},
  afterResize: function() {},
  afterRender: function() {}
});

Any help appreciated. Thanks in advance.

Upvotes: 1

Views: 2136

Answers (2)

Ariel
Ariel

Reputation: 1

I solved this issue by combining a location change onload as well as scrolling to the top of the window. 

    $(window).on('load', function() {
  location.href = 'http://localhost:3000/#1';
  setTimeout(function() {
      $(window).scrollTop(0);
      $.scrollify.update();
  });
});

You will have to adjust the location.href to your means as well as set updateHash to true so that the browser is aware of which hash you want it to go to onload

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29277

It's not related to the plugin. When the page offsetTop set, then after reload the browser scroll to the last position. You can see it a live here

You can solve this by scroll the page back to top when page is loaded.

$(window).on('load', function() {
  setTimeout(function() {
      $(window).scrollTop(0);
  });
});

Live demo here.

I'm not sure why we need setTimeout but that's the only way it works.

Upvotes: 1

Related Questions