Feel free to open up the js files that come with the plugin to look things over in more detail, as needed.
Essentially, the plugin does some calculations and whatnot and ultimately makes use of jQuery animate()
app.$html_and_body.stop().animate({
'scrollTop': scrollTo // scroll and offset
}, 900, 'swing', function( evt ) {
app.initialScroll = app.isScrolling = false;
app.$html_and_body.trigger( 'hash_link_scroll_offset.complete', evt );
} );
Thread Starter
Daniel
(@davil2008)
Thank you for your quick response.
Would this code work in a HTML widget, or if not, is there a way to convert it to HTML ?
Thread Starter
Daniel
(@davil2008)
But what’s weird that there are simple ways to scroll smoothly in HTML, but when I try to add them to the widget, they display as plain text in the header ? Do you have any idea why ?
If you’re trying to copy/paste the small snippet above as is, to somewhere else without the rest of the js file, I could very easily see it failing. Most specifically because the js objects/variables used in that reply wouldn’t be available to you. I pasted it to show a small part of how the plugin works.
I’d recommend checking out https://api.jquery.com/animate/ for how that part specifically works, and then the entirety of our js file to see how we ended up piecing everything together.
Thread Starter
Daniel
(@davil2008)
OK, Thank you. But I have found this code in hash-link-scroll-offset.js and, deleted it to see if it affects the site, and the smooth scrolling wasn’t affeceted.
sounds like you may be in a good overall place at the moment.
Thread Starter
Daniel
(@davil2008)
I tried deleting all the hash-link-scroll-offset.js to see if the scroll is affected and it wasn’t.
Thread Starter
Daniel
(@davil2008)
I tried deleting all files one by one and discovered that the smooth scrolling is coming from hash-link-scroll-offset.php
Thread Starter
Daniel
(@davil2008)
I tried deleting parts of the code and have found out that this code in hash-link-sroll-affset.php is creating the smooth scrolling :
public function enqueue_js() {
$min = defined( ‘SCRIPT_DEBUG’ ) && SCRIPT_DEBUG ? ” : ‘.min’;
wp_enqueue_script( ‘hash_link_scroll_offset’, self::$url . “assets/js/hash-link-scroll-offset$min.js”, array( ‘jquery’ ), self::VERSION, true );
wp_localize_script( ‘hash_link_scroll_offset’, ‘hlso_offset’, array( ‘offset’ => get_option( ‘hash_link_scroll_offset’, 0 ) ) );
}
Thread Starter
Daniel
(@davil2008)
But Whats weird is that when I try adding a simple code such as:, The code’s showing as plain text, that’s why I installed the plugin in the first place.
I’ll also create a separate ticket for this, but do you have any idea ?
html {
scroll-behavior: smooth;
}
-
This reply was modified 5 years, 9 months ago by
Daniel.
-
This reply was modified 5 years, 9 months ago by Daniel.
-
This reply was modified 5 years, 9 months ago by Daniel.
The smooth scrolling effect is all jQuery.
Your point about the php file and the code snippet shown from this reply https://ww.wp.xz.cn/support/topic/how-does-this-plugin-make-scroll-smooth/#post-13206242 is just where the js file is being located from, which leads you back to the js file as the source of the proverbial magic.
For your last comment about html { scroll-behavior: smooth; } did you make sure to wrap it in a <style></style> tag?
Thread Starter
Daniel
(@davil2008)
Yes !! Thank you !! And last question, it is now scrolling a bit before the top, so how can I also tell it to scroll a little bit ?
Are you referring to like if you have an anchor on a heading tag, the scroll goes just far enough to cover the heading itself, and you want it to not cover the heading so much? or similar examples.
Thread Starter
Daniel
(@davil2008)
Yes, kind of. I have this none sticky social icons header, and the scrolling stops right before it, see screenshot:
https://ibb.co/NFsgJ1H
The closer it is to the opening <body> tag, the more “at the top” it’ll be. I’m seeing the id="top" spot inside part of a widget. Probably a good idea to move that to say your header.php file instead of a widget that may or may not get moved or somehow lost as active.
