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.4 (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).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.

Page scroll to id for WordPress

Automatic installation

Click “Add New” under “Plugins” menu in WordPress administration. Enter “Page scroll to id” into the search field and perform the search. Results should show the plugin. Clicking on “Install Now” will automatically download and install the plugin. When installation is finished, click “Activate Plugin”.

Manual installation

Download the plugin from WordPress plugins repository. Extract files and upload the entire page-scroll-to-id folder to “/wp-content/plugins/” directory on your server. The plugin should now appear in “Plugins” menu in WordPress administration. Click “Activate” under plugin name.

Configure plugin options by clicking “Settings” or through the “Settings › Page Scroll to id” menu.

Page scroll to id for WordPress tutorial
Support forum


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: "easeInOutExpo" });
scrollingEasing: "string"
Sets the animation easing type while page is animating (easings).
$(selector).mPageScroll2id({ scrollingEasing: "easeInOutCirc" });
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 });
User defined callback function, triggered when scrolling animation begins.
Code examples
User defined callback function, triggered when scrolling animation is completed.
Code examples

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.6.0 or higher
  • Page scroll to id for WordPress


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 3 4 5

  1. Leo
    Posted on May 19, 2016 at 23:29 Permalink

    how can i use scrollTo function on wordpress plugin ?

    i want to the page scroll like fullscreen scroll or one page scroll

    like this one

  2. Chris Anderson
    Posted on May 16, 2016 at 18:18 Permalink


    Quick question: Just wondering if you can set the pages to auto scroll rather then onclick?

    • malihu
      Posted on May 16, 2016 at 19:27 Permalink


      Not sure what you mean by “auto scroll”(?) What would be the triggering action to scroll the page to an id? Can you describe a functionality or a situation you have in mind?

      Perhaps the scrollTo method is what you need but I can’t say for sure.

      • chris
        Posted on May 17, 2016 at 17:07 Permalink

        Basically I just mean like a Slideshow. I really like this idea but I guess my situation is a bit different. I will need complex pages of dynamic content which this can handle, but it will be displayed publicly and will scroll automatically. It’s basically going to be like a community events/calendar board.

        Does that make sense?

        • malihu
          Posted on May 17, 2016 at 18:30 Permalink

          You can use plugin’s scrollTo method in your own function(s) to trigger a page scroll:

          The only limitation is that the plugin works only on documents root element (html/body). It cannot scroll an overflowed div which is what a typical slider does.

          If you plan to auto-scroll the whole page, then you can easily use the method above in your script(s).

          • chris
            Posted on May 17, 2016 at 22:40 Permalink

            Ok great, probably just what I’m looking for. Thanks again for the help. I’ll bug you again if I run into any issues.


        • malihu
          Posted on May 17, 2016 at 23:15 Permalink

          No problem. If you need help let me know.

  3. anna esc
    Posted on May 12, 2016 at 20:15 Permalink

    Hi. I would like to know how can I highlight the menu-item “Recetas y consejas” in my webstite (it’s the blog) when I am in a single post. I have tried this and didn’t work:
    .single-post #headerwrap > a{ color: #00e6b4; }
    Thank you.

    • malihu
      Posted on May 13, 2016 at 12:20 Permalink

      I think you should try:
      .single-post #headerwrap #menu-item-4583 > a{ color: #00e6b4; }

  4. Mirko
    Posted on April 20, 2016 at 19:57 Permalink

    Hi Manos,

    Just one quick question. Is there a way to delay the start of scrolling?

    This could be useful for mobile devices, especially if there is an fullscreen overlay navigation involved πŸ™‚

    Example: User clicks on the navigation item, navigation is first animated out, and then the scrolling to specific section starts.

    Basically what I want is delay option, in my case it would be the same length as the overlay navigation fade-out animation.

    • malihu
      Posted on April 21, 2016 at 04:18 Permalink


      Do you use the plugin within WordPress? Also, do you want this delay when navigating from/to different pages/URL?

      If both of the above apply, you can set a delay for “Scroll to location hash” in plugin settings.

      • Mirko
        Posted on April 28, 2016 at 21:51 Permalink

        Hi Manos,

        Sorry for the late reply !

        No, I am using the jQuery version. I just need the delay option that I can use on smaller screens, so that I can finish hiding the overlay navigation and then executing the scroll to desired element.

        Hope ypu get me πŸ™‚

        • malihu
          Posted on April 29, 2016 at 13:59 Permalink


          There’s no delay option but you can do it manually.

          You need to disable the click event via the clickEvents option parameter and use plugin’s scrollTo method inside your custom click event with the delay you want.

          I’m posting a working code example which should do what you need:

          (function($){ var ps2idSelector=$("a[rel='m_PageScroll2id']"), //set your element selector ps2idDelay, ps2idTimeout; $(window).load(function(){ ps2idSelector.mPageScroll2id({ clickEvents:false //disable click event });{ //add custom click event which calls scrollTo method e.preventDefault(); var $this=$(this); if(ps2idTimeout){clearTimeout(ps2idTimeout);} ps2idTimeout=setTimeout(function(){ //scrollTo method $.mPageScroll2id("scrollTo",$this.attr("href"),{ clicked:$this }); },ps2idDelay); }); }).on("load resize",function(){ //set/change delay accordingly var winSize=$(this).width(); if(winSize<=1024){ ps2idDelay=600; //delay in milliseconds }else{ ps2idDelay=0; } }); })(jQuery);

          • Mirko
            Posted on May 4, 2016 at 00:47 Permalink

            Thanks Manos!! Working like a charm πŸ™‚

  5. Brian
    Posted on April 15, 2016 at 20:01 Permalink

    Hello Manos,

    Very nice work on this plugin. I appreciate that you have created it so thoroughly. I was hoping you could help me with one issue I’m having:

    I have the “Enable on WordPress Menu links” option selected and I can’t seem to get the offset to work. I enter a value of 50 as the offset but it does not do anything.

    The page is successfully scrolling to the id but I need it to be offset by 50 pixels or so in order to give me room off of the fixed header.

    The site URL is currently at

    Any ideas?

    Thank you,


    • malihu
      Posted on April 15, 2016 at 20:59 Permalink

      Hello Brian,

      I checked your link and it seems that your menu links are not handled by ‘Page scroll to id’.

      I inspected the links via browser’s dev tools and they have an additional js click event which seems to scroll the page and prevent ‘Page scroll to id’ page scrolling. This is why offset is not working (it’s not calculated because plugin’s click event is overwritten).

      The additional click event is probably coming from a script within your theme or some other plugin(?)
      Maybe there’s a setting to disable it and let ‘Page scroll to id’ handle page scrolling?

      I also created a test link outside the menu (via dev tools) and page scrolling as well as offset worked as expected, which confirms that another script is handling your menu links.

  6. choco
    Posted on April 13, 2016 at 01:27 Permalink

    Does this works without user clicking on the section?
    I want it to remember the place it is on reload, will it work for that?

    • malihu
      Posted on April 14, 2016 at 00:58 Permalink

      Yes although I’m not sure what you mean.
      Page refreshing will work the same with or without the plugin. For example on the demo, if you scroll down (or click on any link) and then refresh the page, the scroll position will be where it was before (it’s browser’s feature).

  7. Benji
    Posted on March 24, 2016 at 19:27 Permalink


    Love your plugin β€” I’ ve just used it with a site that has a fixed header, however upon scrolling the header jerks up and down. Any ideas? Thanks!

    • malihu
      Posted on April 4, 2016 at 17:25 Permalink


      Not sure if you still have this issue but normally, the “jerking” you describe should not be related with ‘Page scroll to id’. Does the header jerking happen when you scroll the page via mousewheel? It sounds more like an issue with the fixed header itself(?)
      Can you send me your link?


Comments pages: 1 3 4 5

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>