archive

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.

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)

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:

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:

Plugin methods

scrollTo

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.

599 Comments

I would like to ask a question, when I click on a link in the navigation, and then scroll the page, and the link just clicked has a class “mPS2id-clicked” that has not been removed, how can I fix this bug?

Hi,
I’m a beginner trying to use your plugin with elementor on page load. I inserted an html code in a section at the top of the page with this code:
<script>
jQuery(window).on("load",function(){
jQuery.mPageScroll2id("scrollTo","#productbox");
</script>

I have an anchor labeled “productbox”
i was hoping the page would scroll onload.
any idea what I’m doing wrong?

Great Plugin, it worked really well until a couple of days ago. Meanwhile I get the following meassage in my WB theme when your plugin is activated.

Deprecated: contextual_help is deprecated since version 3.3.0! Use get_current_screen()->add_help_tab(), get_current_screen()->remove_help_tab() instead. in /var/www/myeloma-registry.com/wp-includes/functions.php on line 5088

Could you please give me some advice how I can handle this error message.
Best regards
Gerhard

This message is a simple notice. It’s not an error and it does not affect plugin’s functionality or performance in any way (you see this message because you have enabled debug constant in wp-config.php).

I was wondering if it is possible somehow to use the highlight option on a link to another page rather than an intrapage link?

I have a fixed ul in the sidebar of a page -the page contains a number of thumbnail illustrations. What I would like is for the relevant li to highlight as its corresponding illustration scrolls into view. But as I say, the link in the list is to another page, not to the illustration.

i’m using your wonderful plugin since 2016. Recently I saw, that the plugin isn’t working anymore on my site. I can’t say for how long. It’s the newest version running on WordPress 5.2.4.
Its a german website. You have to follow these menus items to get there. “Angebot” then “Preise”. Now you see the menu on the right.
Regardless which item you click the page will scroll to the top instead to the id.

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.

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.

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.

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.

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.

«Free software» means software that respects users' freedom and community. Roughly, the users have the freedom to run, copy, distribute, study, change and improve the software. With these freedoms, the users (both individually and collectively) control the program and what it does for them. — GNU, The Free Software Definition