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.6.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="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.

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

$("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.

Divi WordPress Theme Monarch Social Sharing Plugin

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.
https://opensource.org/licenses/MIT

Pages: 1 2 3 4


635 Comments

Post a comment

Comments pages: 1 6 7 8

  1. Steven
    Posted on August 6, 2023 at 00:52 Permalink

    Hello –

    Still loving this plugin. One quick question – is there a way to exclude a specific anchor link? I read in another thread to add an exclusion (see below) but the code below didn’t do the trick.

    a[href$=’#sampleexercises’]

    The anchor link is accessed from a different page and creates a choppy experience where the user is taken to the anchor link, then to the top, then has a smooth scroll down. Would ideally just get rid of the smooth scroll for this one particular link.

    Thanks!

    Reply
    • malihu
      Posted on August 6, 2023 at 16:01 Permalink

      Hello,

      Are you using the WordPress plugin? If yes, you probably need to disable the “Enable different pages scrolling on all links” option in plugin settings. Let me know.

      Reply
  2. James
    Posted on July 27, 2023 at 15:12 Permalink

    Hi Manos

    I have used your script successfully on a few occasions thank you!

    I think I may have asked this question before – apologies if I have.

    Can I set the plugin to smooth scroll automatically to an id (with offset) a few seconds after a page has loaded (without the user having to click on a link)?

    Thanks again

    Reply
    • James
      Posted on July 27, 2023 at 15:22 Permalink

      Hi again – I have just found your earlier reply from 2020 – so no need to reply again – unless something has changed in your latest version.

      Thanks again 🙂

      Reply
  3. mmdwc
    Posted on July 20, 2023 at 13:13 Permalink

    hello,

    is it possible to use this plugin to scroll inside a container?
    let me explain, my scrollable div(content-ajax) is inside a div (wrapper), therefore the scroll to id function doesn’t work since it’s the body element that gets animated by the script…

    #wrapper { width: 100%; height: 100vh; overflow: scroll; } #content-ajax {}

    Is there a workaround?

    thanks

    Reply
    • malihu
      Posted on July 20, 2023 at 15:17 Permalink

      Unfortunately, no. The plugin works strictly on the root element (html/body).

      Reply
  4. Shwetha
    Posted on July 15, 2023 at 07:26 Permalink

    Hi, can anyone please help me fixing the issue. I have a website https://maithrinet.healthyhomefood.com/ with the 5 menus (Home, About, Solutions, Services, Contact Us) on the header. On clicking Solutions, Services and contact Us links, the page scrolls to the particular sections on the Home page and when the page scrolls the header gets stick on the top. The problem is on menu click the complete section is not visible properly as the section hides behind the sticky header partially. How can i make the page scroll to the exact location and not hide any content behind the sticky header. I have used page scroll to id and Sticky Header Effects for Elementor plugins to achive the effects.

    Reply
    • malihu
      Posted on July 17, 2023 at 02:45 Permalink

      Hello Shwetha,

      I just checked your site. You need to utilize the offset option in plugin settings to offset the scrolling according to your sticky header. The best way to do this is to use your sticky header element selector.

      Just go to “Page scroll to id” settings and set the “Offset” option value to:

      .she-header-yes

      Click save changes and test your page links 😉

      Let me know if it works.

      Reply
      • Shwetha
        Posted on July 18, 2023 at 12:28 Permalink

        Hey Manos,

        Thanks a lot for fixing the issue.

        Reply
  5. Murali
    Posted on May 27, 2023 at 10:20 Permalink

    if am in about page here i clicked button its going to home page #section, For this #section need to add class using my custom script or ?

    Reply
    • malihu
      Posted on May 27, 2023 at 16:34 Permalink

      Please post your page URL so I can check it.

      Reply
  6. kuba
    Posted on May 25, 2023 at 18:10 Permalink

    Hi I thing im stuck a little

    Without this class

    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a .mPS2id-highlight {color: #222;
    }

    All my menu items behave like clicked links and have a color #767676;

    When i add
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a .mPS2id-highlight {color: #222;
    }

    they have #222; color no matter what.

    and my end gol is if the menu is untouch the colour shuld be #222; on mouse click and realase it should be #222; but on hover mouse i would like to hane #767676;.

    I do something wrong clearly.

    oh

    I have no idea how to force slow scroll after clicking home menu buton.
    no matter I use custom link or default menu option which is site, back to top on home is instant not floating smooth.

    Have a great day. Thank you in advance.

    Sorry for my crappy english

    Reply
    • malihu
      Posted on May 26, 2023 at 19:53 Permalink

      Hi,

      You need to exclude the :hover and optionally the .mPS2id-highlight selectors in your CSS. There’s also an error in your second selector as there seems to be a space between a and .mPS2id-highlight. So, change your CSS to:

      .navigation-top .current-menu-item > a:not(:hover), .navigation-top .current_page_item > a:not(:hover){ color: #222; }

      If you also want to have the #767676 color on the highlighted links while scrolling the page, change the CSS to:

      .navigation-top .current-menu-item > a:not(:hover):not(.mPS2id-highlight), .navigation-top .current_page_item > a:not(:hover):not(.mPS2id-highlight){ color: #222; }

      For the “Home” link, make it a custom link and set its URL to:

      https://sopot-homeyapartment.pl/#top

      Let me know if everything it works 🙂

      Reply
  7. Julie Williams
    Posted on April 29, 2023 at 17:15 Permalink

    Thank you so much for the outstanding information. It means a lot for me 🙂

    Reply
  8. Detlef Könnecker
    Posted on January 25, 2023 at 18:52 Permalink

    Hello, the following error shows up in the admin area

    Array to string conversion –> wp-includes/pluggable.php:2279 –> Plugin: page-scroll-to-id

    Is there a workaround?
    have a good day

    Reply
    • malihu
      Posted on January 29, 2023 at 03:45 Permalink

      Hello,

      This is a known issue which will be fixed in the next plugin version (1.7.8). If you don’t want to wait, you can download the development version from the link below and use it replacing the current plugin version you have:

      https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

      You can keep using the development version and update to version 1.7.8 when it becomes available, as you normally do.

      Let me know if you need more help.

      Reply

Comments pages: 1 6 7 8

Post a comment

Cancel reply

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>

css.php