Page scroll to id
Page scroll to id is an easy-to-use jQuery plugin that enables animated page scrolling to specific id within the document. The plugin replaces the default browser behaviour of “jumping” to page sections when links with href value containing hash (#) are clicked, by smoothly animating the page to those sections. You can use it for simple back-to-top links or complex, single-page website navigation and features include: adjustable animation speed, advanced animation easings, vertical and/or horizontal scrolling, ready-to-use classes for links highlighting etc.
Current version 1.6.3 (Changelog)
- Get started
- Configuration
- Methods
- Code examples & short tutorials
- FAQ
- Page scroll to id for WordPress
How to use it
The plugin works simply by connecting links in the form of <a href="#id">link</a>
, to sections within the document, in the form of <div id="id">target</div>
. Clicking the links will smoothly animate the page to the connected sections.
Get started by Downloading the archive which contains all plugin files and examples. Extract and upload jquery.malihu.PageScroll2id.min.js to your web server.
Include jQuery library (if your project doesn’t use it already) and jquery.malihu.PageScroll2id.min.js in your document’s head tag or at the very bottom of your html, just before the closing body tag (recommended for better performance)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="jquery.malihu.PageScroll2id.min.js"></script>
After files inclusion, call mPageScroll2id function on the matching set of elements (selectors) you want the plugin to handle
<script> (function($){ $(window).on("load",function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery); </script>
Using the a[rel='m_PageScroll2id']
selector above, means that the plugin will apply on links with m_PageScroll2id
rel attribute value (e.g. <a href="#id" rel="m_PageScroll2id">link</a>
). You can change the selector to anything you want (id, class name, js variable etc. – strings that represent ways of choosing elements in the DOM). For multiple selectors, use comma separated values: e.g. a[rel='m_PageScroll2id'], a.class-name, li.menu-item a[href*='#']
.
Your links href value should contain #
with the id of the section you want to scroll-to and your document should contain sections with such id.
By default, the plugin scrolls the page vertically. If your page layout is horizontal (demo), set the layout
option parameter to horizontal
$("a[rel='m_PageScroll2id']").mPageScroll2id({ layout:"horizontal" });
To enable both vertical and horizontal scrolling (demo), set layout
to auto
$("a[rel='m_PageScroll2id']").mPageScroll2id({ layout:"auto" });
Page scroll to id provides a ready-to-use class for the highlighted links (links whose target element is considered to be within the viewport). The default highlight class is mPS2id-highlight
, which you can use in your CSS to style your highlighted links (more info). For example:
a.mPS2id-highlight{ background: #ff0; }
This sums up the basics of implementing Page scroll to id in your project. For help and detailed usage guides see Code examples & short tutorials and FAQ.
Configuration
Page scroll to id option parameters
Usage $(selector).mPageScroll2id({ option: value });
scrollSpeed: integer
- Sets the scroll animation speed in milliseconds (default:
1300
).
Example:
$(selector).mPageScroll2id({ scrollSpeed: 900 });
autoScrollSpeed: boolean
- Auto-adjusts animation speed according to target element position and window scroll (default:
true
).
Example:
$(selector).mPageScroll2id({ autoScrollSpeed: true });
scrollEasing: "string"
- Sets the animation easing type when page is idle (easings).
Example:
$(selector).mPageScroll2id({ scrollEasing: "easeInOutQuint" });
scrollingEasing: "string"
- Sets the animation easing type while page is animating (easings).
Example:
$(selector).mPageScroll2id({ scrollingEasing: "easeOutQuint" });
pageEndSmoothScroll: boolean
- Adjusts automatically the scroll-to position so when scrolling to a target element that sits at the bottom of the document, the animation stops smoothly at bottom of the page, instead of breaking at an earlier point (default:
true
).
Example:
$(selector).mPageScroll2id({ pageEndSmoothScroll: true });
layout: "string"
- Defines the page scrolling axis.
Value can be"vertical"
,"horizontal"
or"auto"
.
Example:
$(selector).mPageScroll2id({ layout: "vertical" });
offset: integer, "string", object, function
- Defines the amount of pixels to offset the scroll-to position.
The value can a be a positive/negative number, an element selector as string, a js/jquery object, a function or an array.
Code examples
highlightSelector: "string"
- The matching set of elements already handled by the plugin that will be highlighted (by default, all selectors are eligible for highlighting).
Code examples
clickedClass: "string"
- Sets the class name for the link that’s been clicked (default:
mPS2id-clicked
)
targetClass: "string"
- Sets the class name for the (current) target element (default:
mPS2id-target
).
highlightClass: "string"
- Sets the class name for the (current) highlighted link (default:
mPS2id-highlight
).
Code examples
forceSingleHighlight: boolean
- Allows only one highlighted element at a time (default:
false
).
Example:
$(selector).mPageScroll2id({ forceSingleHighlight: true });
keepHighlightUntilNext: boolean
- Keeps element highlighted until next so at least one element always stays highlighted (default:
false
)).
Example:
$(selector).mPageScroll2id({ keepHighlightUntilNext: true });
highlightByNextTarget: boolean
- Highlight elements according to their target and next target position (default:
false
).
Useful when targets have zero dimensions.
Example:
$(selector).mPageScroll2id({ highlightByNextTarget: true });
disablePluginBelow: boolean
- Disables plugin below [width,height] screen size: boolean, integer, array ([width,height]).
clickEvents: boolean
- Enable/disable click events for all selectors (default:
true
).
Example:
$(selector).mPageScroll2id({ clickEvents: false });
appendHash: boolean
- Append link’s href hash value to browser’s URL/address bar when clicked (default:
false
).
Example:
$(selector).mPageScroll2id({ appendHash: true });
onStart:function(){}
- User defined callback function, triggered when scrolling animation begins.
Code examples
onComplete:function(){}
- User defined callback function, triggered when scrolling animation is completed.
Code examples
liveSelector: "string"
- The matching set of elements that will be handled by the plugin even if they’re not present in the DOM (e.g. dynamic elements that will be added later on).
Example:
$(selector).mPageScroll2id({ liveSelector: "a.my-future-class" });
excludeSelectors: "string"
- The matching set of elements that will be excluded from the plugin (i.e. the plugin will not handle these elements).
Example:
$(selector).mPageScroll2id({ excludeSelectors: "a[href^='#tab-'], a[href^='#tabs-']" });
Plugin methods
scrollTo
Usage $.mPageScroll2id("scrollTo","#id");
Calling plugin’s scrollTo method will automatically scroll the page to the id specified in the second parameter.
Method option parameters
layout: "string"
- Defines the page scrolling axis.
Example:
$.mPageScroll2id("scrollTo","#id",{ layout:"auto" });
offset: integer
- Defines the amount of pixels to offset the scroll-to position.
Example:
$.mPageScroll2id("scrollTo","#id",{ offset:100 });
clicked: boolean
- The jQuery object to simulate the click event.
Example:
$.mPageScroll2id("scrollTo","#id",{ clicked:$(this) });
destroy
Usage $.mPageScroll2id("destroy");
Calling plugin’s destroy
method will completely remove Page scroll to id functionality from all links and targets, returning them to their original state. The method removes all plugin-specific classes, data objects and namespaced events.
Plugin dependencies & requirements
- jQuery version 1.7.0 or higher
License
This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
http://opensource.org/licenses/MIT
Donating helps greatly in developing and updating free software and running this blog 🙂
First and foremost thank you for this wonderful plugin.
For the links to work for the hamburger menu links on a one-page site, I cannot use ‘#link’ but must use a full path ‘https://beatballaballa.com/beta-phase/#link’.
But that ruins the smooth scrolling effect.
Here’s what happens:
The page loads ‘https://beatballaballa.com/#presse’
then hops back to the top of the page:
‘https://beatballaballa.com/#’, after which it loads:
‘https://beatballaballa.com/#presse’
Is there something I can do to get the instant scrolling effect back that I get with ‘#presse’.
Thank you either way for your great plugin and help,
Mark
Hello,
I responded to your request in the support forum:
https://wordpress.org/support/topic/double-load-with-full-path-link/#post-12095693
You should remove the
beta-phase
part from your links URL (there’s no beta-phase page in your site).Thank you Manos,
I followed your advice, see response to your post
https://wordpress.org/support/topic/double-load-with-full-path-link/#post-12095693
Thank you much, Mark
Hi!
Thanks for your amazing plugin.
Sometimes the “Scroll from/to different pages (i.e. scroll to target when page loads)” works, and sometimes not.
It’s hppaning in the same website:
Working – https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D/#s8
Not working – https://chizki.com/solutions/#s8
I’d glad to know what should I do to fix it. I want it to work in all pages.
Thanks!
Hello,
On the
https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D
page, thes8
target element exists and that’s why it works.On the
https://chizki.com/solutions/
page, there’s nos8
target element, so it doesn’t work.These are different pages, so you need to also add the
s8
id on the/solutions/
page.Let me know
Thanks, you were right.
But what about here?
https://levi-david.com/%D7%94%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D-%D7%A9%D7%9C%D7%A0%D7%95/#s4
Here all the sections have a different ID, and yet it didn’t scroll to them when loading the page
No problem.
In the page you posted there are few elementor links with custom actions that conflict with the plugin.
Try this:
Go to “Page scroll to id” settings and add the following at the end of the selectors are excluded field (just copy/paste the code below including the comma and space at the beginning):
, #elementor-action
Save changes and test your page.
Thanks a lot, you’re great, but it didn’t work:
http://prntscr.com/pv03ia
Any idea please?
Ah sorry, I posted the wrong selector! Change it to this:
, a[href*='#elementor-action']
Save changes and test. Let me know if it worked 🙂
Thanks! You’re great.
now it’s opening the page at the right section, but it’s not scrolling down to it.
I’d love to get a fix for it, but it’s not urgent, take your time.
Thanks again!
You have an error in the selectors are excluded field. There are 2 commas there. Change the value at the end from:
, , a[href*='#elementor-action']
to:
, a[href*='#elementor-action']
Hello Malihu!
Thank you for developing Page scroll to 2id plugin, it’s great to use it.
My question:
I have installed JinvertScroll script on WordPress website for a horizontal scrolling and also installed Page scroll to 2id plugin with a “Prevent other scripts from handling plugin’s links” and “auto” orientation adjustments but now i have a problem with scrolling to my Page scroll to 2id sectors: after clicking the button the screen moves only for a very little to the right but not to the Page scroll to 2id sector that i need and adjusted. PS: when i deleted JinvertScroll script all began work as normal but the page became as a vertical but not a horizontal orientation. I read some your answers here so maybe the problem with CSS. Also i implemented your script with only mouse wheel scrolling effect but the situation was the same: screen only moved to one direction to the right but not back by mouse wheel.
Can you give a useful advices what to do? Thank you in advance!
Hello,
I need to see your page/site in order to help with such issues.
That said, “Page scroll to id” does not convert a page’s template design from vertical to horizontal (and vice versa). By using the horizontal or auto layout in plugin settings, you simply instruct the plugin the direction it should scroll (but your page should already have a horizontal design/layout).
Also, the plugin does not scroll overflowed divs. It works strictly on document’s root element (html/body).
I’m not sure if any of the above is the issue. If you can post your page/site URL, I’ll be able to check it and help if I can.
If i will post the link can you hide it from others?
You can send me an email here:
https://manos.malihu.gr/contact
This is really valuable information and very practical to get done.
Is there any resource for the new updates as well?
Thank you!
Hi,
I’m using the scroll to id and custom scrollbar plugin. It works well, but I can’t find out how I can set the highlightClass on scroll and on click
I have your mCustomScrollBar and m_PageScroll2id plugins installed on a page that jumps to IDs like this:
<a href="#bkmk11" class="web_address" style="text-decoration: none" rel"m_PageScroll2id">How does this work?</a><br>
that jumps to IDs like this:
<div class="h1_info" id="bkmk11"><b>How does this work</b></div><br>
But when it gets there, the scrollbar disappears. If I try to scroll with the mouse wheel, the cursor jumps back to the top and the scrollbar reappears.
You show a callback that will return the scrollTo.y property but that only returns the position; it doesn’t allow me to mouse from there.
function myCustomFn2(){ console.log(mPS2id.scrollTo.y);}
I need to update the mouse position but your code doesn’t show how to do that. I really hope you can help with this. Both plugins are great!
I am going to credit you on my website when it goes live in two weeks. The site has a very innovative design. PLEASE HELP.
Thanks,
Mark
The 2 plugins are not compatible. They don’t work together as “Page scroll to id” works only with browser’s native scrollbar.
Javascript scrollbars (like mCustomScrollBar) have their own methods for scrolling the page. You can see the method here and a related guide here.
Is there any way/mechanism to attach the ps2id scroll settings to a non tag e.g. – div.iamclickable
I’m using it in WordPress Divi theme and I’ve set a #link on a hover_enabled et_clickable et_pb_row
The plugin works strictly on anchor elements (i.e. links) with a valid href/URL attribute.
The only way to do it on a div, would be via javascript, e.g. by using plugin’s scrollTo method to scroll to the target element when the div is clicked. For this you’d need to add a custom js script in your template.
Navigation blocked
Hello,
I have several sites that use your plugin.
I just noticed that since this morning, your plugin has been blocking my sites:
– links/menus no longer work
– my browser tells me: “A web page slows down your browser. What do you want to do?”
We can no longer browse the sites and they are therefore inaccessible.
I disabled the plugin, the problem is solved but of course the “scroll” function no longer works.
Do you know what the problem is.
I have the latest updates of wordpress and my plugins.
Thank you.
Sorry about my English, I’m French.
Thank you.
Please see my reply here:
https://wordpress.org/support/topic/navigation-blocked/#post-11583781
Hi,
with the plugin update I got an issue
with version 1.6.5
link with href like http://www.xxxxxx.com/page/#id are no longer underlined, while they were with 1.6.4
link with href like #id are still underlined, as they were with 1.6.4
This sounds like a css issue. If you post your site url, I’ll be able to check what happens and help.
Hi
this is the page that does not work anymore with 1.6.5
http://www.gianesing.com/it/azienda/
It seems you’re using the “Q2W3 Fixed Widget” plugin, right?
Did you update the Q2W3 plugin too or change its settings?
Please check the following thread and see if changing the Q2W3 plugin options mentioned, fixes the issue:
https://wordpress.org/support/topic/conflict-with-q2w3-fixed-widget-1/
Hi,
I have Q2W3 5.1.9, the latest available.
The thread is about Q2W3 not working, in my case is page-scroll-to-id that does not work as expected. Any case I tried to do what suggested in thread, but it doen not work.
Hello again,
I think the issue you’re having might be related to an issue in version 1.6.5.
I’ve pushed a fix for this issue in plugin’s development version:
https://downloads.wordpress.org/plugin/page-scroll-to-id.zip
Please replace version 1.6.5 with the one above and check if the issue is fixed.
Let me know
Hi,
i’m test your plugin for this website, but I have a problem. When I click the link in menu once, it scrolls to the anchor but it work only at the first time. The menu-link is deactivated after clicking.
I changed in the settings “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target2 on and off but this has no effect for my problem. I use the WPBakery Plugin.
Thanks for your help.
Hello,
The problem you have does not come from “Page scroll to id”. It comes from your theme’s internal function for scrolling the page. The 2 scripts that do this are:
...themes/suffice-pro/assets/js/smooth-scroll.min.js
...themes/suffice-pro/assets/js/suffice-custom.min.js
Try this:
Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.
If this doesn’t work, you’ll need to see if there’s an option in your theme settings to disable page smooth scrolling for same-page links.
Let me know
Hello,
i try check “Prevent other scripts…” and deactivate the “back to top”-function in theme but the problem is the same.
Thanks for your reply.
In plugin settings, enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test again.
Hello,
that’s is the Solution. After checking this option i can jump between the anchors.
Thanks for your help.
Hi,
After updating to Page scroll to id version 1.6.5 it scrolls too fast, and doesn’t stop the scrolling were it should stop it.
This page illustrates the problem:
https://silent.se/psy/overklighet
Click on for example [1] and you see what happens.
Hi,
Did you installed another plugin, e.g. auto-optimize?
Thanks for your reply. Yes, at the same time as updating Page scroll to id I updated Autoptimize, WP Rocket and WordPress.
Can you flush/clear your site cache (wp rocket)?
I have deleted the cache of Autoptimize and flushed the cache of WP Rocket. The problem remains.