Page jump on reload with `hash: true`

[Jérémie Astori]

I am upgrading from 1.2.8 to 1.4.0 and noticed something new: using hash: true, on page reload of example.com/#my-hash (i.e. #my-hash is somewhere in the page), there is now a jump from top of the page to the position of #my-hash.
Previously, the smooth scroll would happen on click but not on reload.

This is due to this block, which assumes that if hash: true is set, not only the hash of the selected link, will appear on the address bar (per L47) but also that I want to animate scroll on page load.

Is there a way to disable the second part of that statement? If not, would you be open to adding a new setting (load: true/false?) that would enable/disable this block?

[Ariel Flesler]

Hi @astorije I think the current behavior is what the large majority expects. The plugin has existed for many years and this is the first time this comes up. I think we can leave the issue as closed and if many users complain we can revisit this.

I don't think it's worth adding another option just for this because, I think, you can get the expected behavior by passing an onBefore() callback to the plugin and changing the duration based on whether it's this first jump or not (setting it to 0 on page load ofc).

What do you think?

[Jérémie Astori]

Hi @astorije I think the current behavior is what the large majority expects. The plugin has existed for many years and this is the first time this comes up.

I know this is anecdotic, but I've been using this plugin for years (thanks a lot for your great work, btw ❤️) but always in outdated versions. The "new" (as in, new a couple years ago lol) feels much sloppier than the previous one, which is why I directly noticed it.
Of course, by sloppy I don't mean your work being sloppy, but the end result once put on a very basic website since refreshing the page will incur a flickering/jumping.

It seems to me that the alternative (i.e. v1.2.8 behavior) feels more natural than the current behavior. You are mentioning that the large majority would expect current behavior but I could have sworn the other way around. Am I missing some context? (Sorry if I appear sarcastic or anything, I'm really trying to understand and avoid making assumptions for others)

you can get the expected behavior by passing an onBefore() callback to the plugin and changing the duration based on whether it's this first jump or not (setting it to 0 on page load ofc).

So if I understand correctly, you are suggesting the following:

$(...).localScroll({
  duration: "slow",
  hash: true,
  onBefore: function() { /* If first jump AND the URL ends with `#something`, set `duration` to 0 */ }
});

I get the intent, but there is a lot of room for errors and edge cases, IMO.
Right now, I went for a safer but much hackier solution of commenting out the initial block and this works fine. I would however much prefer not hacking my own fork/local copy and contribute to make this project better, however :)
Hence my suggestion for an option, if simply going back to the previous behavior is not something you'd consider. I think I see how the current behavior would be useful in a slideshow/app type of thing, but not so much in a regular document-based website (not trying to shameless plug but this is what I'm talking about).

If you're still not in favor of making this possible then feel free to close this issue and I'll keep my monkey-patched version, but otherwise I'm happy to discuss and help with this :)

[Ariel Flesler]

I understand your point perfectly, indeed the behavior became unavoidable on the newer version. Let's wait to see if it's something that is widely problematic.

Thanks for reporting!

[Jérémie Astori]

(May I ask what minifier you use to build your .min.js?)

[Ariel Flesler]

I use Dean Edwards's Packer, with Shrink Variables on but Base62 Encode off. The header part I do manually.

[Jérémie Astori]

Thanks!
Just FYI, I have noticed a slightly better minification by using https://javascript-minifier.com/ or https://jscompress.com/ (they both produce the same output, probably the same engine?) going from 1326 chars to 1215 chars (9.2%). Not worth changing it at all cost, but I figured I should share.
Also, I didn't test that minified version 😅