This website uses cookies to personalise ads and to analyse traffic ok
web design

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.5.8 (Changelog)

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=""></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


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, 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.

more info

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Avoiding Conflicts with Other Libraries for more info).

Plugin function is called on window load ($(window).on("load")) so it executes after all page elements are fully loaded, ensuring the script calculates correctly your content’s length.

By default, the plugin scrolls the page vertically. If your page layout is horizontal (demo), set the layout option parameter to horizontal


To enable both vertical and horizontal scrolling (demo), set layout to 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:

    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.

Divi WordPress Theme Monarch Social Sharing Plugin


Page scroll to id option parameters
Usage $(selector).mPageScroll2id({ option: value });

scrollSpeed: integer
Sets the scroll animation speed in milliseconds (default: 1300).
$(selector).mPageScroll2id({ scrollSpeed: 900 });
autoScrollSpeed: boolean
Auto-adjusts animation speed according to target element position and window scroll (default: true).
$(selector).mPageScroll2id({ autoScrollSpeed: true });
scrollEasing: "string"
Sets the animation easing type when page is idle (easings).
$(selector).mPageScroll2id({ scrollEasing: "easeInOutQuint" });
scrollingEasing: "string"
Sets the animation easing type while page is animating (easings).
$(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).
$(selector).mPageScroll2id({ pageEndSmoothScroll: true });
layout: "string"
Defines the page scrolling axis.
Value can be "vertical", "horizontal" or "auto".
$(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).
$(selector).mPageScroll2id({ forceSingleHighlight: true });
keepHighlightUntilNext: boolean
Keeps element highlighted until next so at least one element always stays highlighted (default: false)).
$(selector).mPageScroll2id({ keepHighlightUntilNext: true });
highlightByNextTarget: boolean
Highlight elements according to their target and next target position (default: false).
Useful when targets have zero dimensions.
$(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).
$(selector).mPageScroll2id({ clickEvents: false });
appendHash: boolean
Append link’s href hash value to browser’s URL/address bar when clicked (default: false).
$(selector).mPageScroll2id({ appendHash: true });
User defined callback function, triggered when scrolling animation begins.
Code examples
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).
$(selector).mPageScroll2id({ liveSelector: "" });

Plugin methods


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.
offset: integer
Defines the amount of pixels to offset the scroll-to position.
clicked: boolean
The jQuery object to simulate the click event.


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


This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.

Pages: 1 2 3 4


Post a comment

Comments pages: 1 4 5 6

  1. Jaime
    Posted on May 18, 2017 at 14:24 Permalink

    Hi there!
    Thanks a lot for your plugin, it’s great.

    I’ve one question I’m not able to solve.
    Everything goes ok, but when I clik one page in my main menu, it refresh the page (before going to the target).

    You can have a look here.

    What i’m missing?
    Thanks a lot!

    • malihu
      Posted on May 18, 2017 at 16:33 Permalink


      This is happening because your web server is set to remove the trailing slash from the URL automatically. So:

      Notice how the last/trialing slash (/) is missing.
      For the browser, these 2 URL are different, thus the page refreshes.

      This happens simply because you’ve set your links URL to use a trailing slash. If you remove it the problem will be fixed. For example, change “ARTISTAS” link to:
      i.e. remove the slash before the hash (#) and it’ll work as expected πŸ˜‰

  2. Trktrk
    Posted on May 6, 2017 at 18:21 Permalink

    How do I instal this plugin in WordPress??
    I tried uploading it but i get an error. When uploading via FTP I cannt see it in plugin list in WordPress

  3. Krystian Millora
    Posted on May 3, 2017 at 07:11 Permalink

    Hi, Awesome plugin

    but how can I change the color of the nav-item when I click or highlight the specific nav? I’ve used the “a._mPS2id-h.mPS2id-clicked.mPS2id-highlight” but it didn’t work for me. Thank you

    • malihu
      Posted on May 4, 2017 at 00:36 Permalink


      Did you fix it? It seems to work for me now.

  4. James
    Posted on March 27, 2017 at 18:45 Permalink

    Hi there

    I’ve said it before and I’ll say it again – your plugins are great!

    I have something that is bugging me though and I can’t see what I’m doing wrong. On the above web page there are links in the submenu to another page – the page should scroll to the offset of the ID but it doesn’t. Scrolling works within the page but not between pages. It’s as though the script is not being called.

    Can you help please?



    • james
      Posted on March 27, 2017 at 18:47 Permalink

      the weblink didn’t reproduce – here it is again.

    • malihu
      Posted on March 28, 2017 at 02:22 Permalink


      Scrolling smoothly from/to different pages is only available on the WordPress plugin. You need to add some extra code in order to get this functionality with the simple jQuery plugin.

      You should edit your jquery.functions.js file and remove $("a[rel='m_PageScroll2id']").mPageScroll2id({ scrollSpeed: 1500, offset: 120 }); (it’ll be moved below) and add the following code at the end of the file (after the last });):

      (function($){ var _hash=location.hash || null, _validateLocHash=function(val){ try{ var $val=$(val); }catch(error){ return false; } //avoid js errors on invalid selectors return $(val).length && $("a[href*='"+val+"']").length; }; $(document).ready(function(){ if(_hash){ if(_validateLocHash(_hash)){ var href=window.location.href.replace(/#.*$/,"#"); $(window).scrollTop(0); //stop jump to hash straight away if(window.history && window.history.replaceState){ window.history.replaceState("","",href); }else{ window.location.href=href; } } } }); $(window).on("load",function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id({ scrollSpeed: 1500, offset: 120 }); //Page Scroll to id fn call if(_hash){ if(_validateLocHash(_hash)){ $(window).scrollTop(0); //jump/start from the top setTimeout(function(){ $.mPageScroll2id("scrollTo",_hash); //scroll to location hash on page load if(window.history && window.history.replaceState){ window.history.replaceState("","",_hash); }else{ window.location.hash=_hash; } },0); //optional delay } } }); })(jQuery);

      • James
        Posted on March 28, 2017 at 12:00 Permalink

        That’s perfect – thanks!

        Since sending you the message, I did manage to get a a form of it to work in another version but only to partially.

        I’m very grateful.


  5. gamatire
    Posted on March 26, 2017 at 11:01 Permalink

    Thanks that was helpful

  6. horstmith
    Posted on March 16, 2017 at 19:39 Permalink

    Hey, great plugin!

    but, how can i change the color of the font?
    i tried everything. i use WordPress with the semplice theme.

    here is the button i want to change the color of the font:

    thanks a lot!

    • malihu
      Posted on March 16, 2017 at 20:19 Permalink

      Changing font color is done via CSS as with any kind of link (it doesn’t matter if the link is added or handled by “Page scroll to id”).
      You should edit your theme’s stylesheet (or custom CSS) and set the color you want. For example, to set a color for links handled by the plugin (e.g. your “SKIP” link), you can add:

      a._ps2id { color: #c0c0c0; }

      and for the hover state:

      a._ps2id:hover { color: #000; }

  7. Josh
    Posted on March 11, 2017 at 07:05 Permalink

    Just started my own WordPress website for a portfolio and I really love this plug-in. For the twenty seventeen theme it might be helpful to be able to scroll so that the bottom of an element is aligned with the bottom of the browser window (viewport?) rather than the default which is that the top of the element aligns with the top of the window. It looks like someone already commented on this but the solution seemed to only work for elements with fixed heights, or maybe there is already a way to do it but I can’t quite figure it out. Would it be possible to have an option for the target to be at the top or bottom of the viewport?

    • Josh
      Posted on March 11, 2017 at 07:34 Permalink

      I’m looking for something like this:

    • malihu
      Posted on March 11, 2017 at 21:23 Permalink


      I can’t really say if this functionality can be added as a plugin feature/option on a future version. I’ll need to make extensive tests and if everything goes well, I’ll add it.

      For now, you’ll need to use javascript (for elements with non-fixed height).
      You can add a script (<script>) in your theme’s template (e.g. in footer.php after wp_footer function) that’ll change the offset of a specific link/target dynamically.



      (function($){ $(window).on("load resize",function(){ var val="#panel2"; //set your element's id/hash fragment value $("a[href*='"+val+"']").data("ps2id-offset",function(){ return $(window).height()-$(val).height(); }); }); })(jQuery);


      The above will make your “Tinkerbot” link scroll until the bottom of #panel2 section reaches the bottom of the viewport.

      • Josh
        Posted on March 12, 2017 at 03:01 Permalink

        This is awesome!! Thanks so much for your quick response and help. I got it working really well with a click event on the top menu. The way I did it is probably not the most efficient way but it works for this site. Donated. Have a beer on me πŸ™‚

        • malihu
          Posted on March 12, 2017 at 07:07 Permalink

          Good call. Looks good to me πŸ˜‰
          Thanks a lot for your donation and support!


Comments pages: 1 4 5 6

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>