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 also have a problem with the highlighting thing like many other guys.

I’m new to WP and I’ve just started to create a new site for our small family business. I use Maskitto Light theme with Pagebuilder because of the visual page-editing.

On the main menu I’ve created 2 custom links (About us; What we do), and I’ve also created 2 other “classic” menu items (Our products and Contact us).

I use full links for the custim links because I want t reach them from the two classic menu items, too. The problem is that they are highlighted all the time when I’m on my starting page. I’ve tried to mark the “Allow only one highlighted element at a time” option but had no succes. I think it’s beacuse of the default theme…

You don’t need the “Allow only one highlighted element at a time” option. The menu items are probably highlighted by your theme (like you said). If you didn’t use any of the plugin’s highlight classes in your CSS, then the highlighting you see comes from your theme’s stylesheet.

Hi, I’ve installed the plugin to my wordpress website and it works great, however upon scrolling, the links are highlighted when it’s in viewport, which results to a multiple highlighted links. I’ve already used the -first or -last but still the same.

What i want to do now is to only highlight the current menu link when the target reaches the sticky header or navigation menu. Is there a way that i can do that?

Hello! I’m using Material Design Lite framework from google but your plugin doesn’t work on it. Can you explain how to switch the BODY scrolling selector to another one (inner div container)? It’s possible without modifying core js? Thanks in advance. Love your plugin and used it on my previous project.

Hello! I’m currently developing a website and am trying to use your code to create the scrolling effect. I am only using it on my homepage for now. It is a wordpress installation, but I’m using the manual inclusion instead of the wordpress plugin.

Currently it’s working perfectly…in Firefox. When I test in Chrome or Safari nothing happens. Has this happened before? Am I missing some piece of code to make it work for all browsers?

Oh you found a bug!
I’ll update the script asap but in the meantime simply move plugin scripts (jquery.malihu.PageScroll2id.min.js and function call script) from the head tag to the body (at the bottom, right before the closing body tag) – no need, see comment below.

hey, I really love your plugin and I think it’s brilliant for linking inside posts. And I can’t help but seeing we can only use scroll to text once. After I clicked it and was moved to the linked part, I couldn’t use the scroll to text again. Is this normal or is there any way to refresh it. Thank you.

I don’t know JQuery or CSS or HTML… but I manage to use your scrollbar plugin successfully. However, I cannot make it work with another code, one about a back-to-top button. It’s either one or the other, but not both codes. In other words, if only your code is present in the page, it works… and if only the back-to-top code is present, then it works… but neither will work if both codes are present on the page.

I would like to have your awesome scrollbar on my page, but also I would like to have a “back-to-top” button at the bottom of the page.

I would also like to use a scroll to top plugin but I’m worried it could have conflicts. Do you think it will be OK? I have installed both and initial testing seems to work but I know sometimes conflicts don’t show themselves right away.

Page scroll to id handles only the links that is instructed to handle and does not mess with other elements. From what I’ve seen, Smooth Scroll Up is simple enough so it shouldn’t cause any issue (I would be really surprised if it did).

Hi,
Thanks for making this plug in and giving such thorough support! I’m designing/building a site that has an accordion built into the theme. I’ve got most of the content within the accordion panels.

I’ve got your plug in set up and working on the top menu – what I would like to do is when the menu item is clicked on – to have the scroll go down to the section and open the appropriate panel.

The theme support folks have given me the code to use, but I haven’t been able to figure out how to configure it to work with your plug in. Any help would be appreciated. Here’s the code I’ve been given to work with:

You have a script at the bottom of your HTML (the last one with the mPageScroll2id and other functions). It’s not working because your code is not wrapped in jQuery and it’s not executed properly (e.g. on page load).

What you tried to do is actually correct (good thinking!) and if you wrap your code like below it will work:

You can add/remove as many cases/conditions as you like (inside the js switch function). I could make it work automatically (e.g. without conditions) but it’s better for you to have more control and set the exact link-accordion panel combination you want.

The switch statement roughly means:
If the clicked link has URL/href “#fellowships” activate accordion 0
If the clicked link has URL/href “#eligibility” activate accordion 1
and so on…

You accordion panels start from 0 (zero), so the first panel is 0, the second one is 1, the third is 2 etc.

Hi, don’t know if this will help you, but I have had a similar issue and fixed it.

The problem was with my id’s. If you include multiple words with a space between them it causes a jump. If you are using multiple words in an id for example: #my best friend-id then you need to change it to #mybestfriend_id and it will scroll.

In any case it would be helpful to include your website URL for the plugin author to have a look.

How does Your plug-in when section, have a small height – say 100px !?
Please show me a working example of how highlight sections in the menu when you scroll the page.
Is it possible to highlight only one menu, not several at once.

I checked your page. When you say “the page doesn’t work” you mean the sub-menu is not opening? If yes, this has nothing to do with the plugin. It has to do with the link being the home URL, so when it’s touched/clicked, it loads the homepage.

I checked the mobile layout with Chrome device toolbar and the plugin scrolls the page as expected.

I’m using the plugin to scroll through posts on a single page with the links going to #post-id. I have the post titles in the left column of the page and all of the posts in the right column.
It works when you first click a post title (not accurately), but once you click one link none of the others work.

I’m also using it in my nav bar to scroll to a homepage section and that works perfectly so I must be doing something wrong…?

Fantastic plugin, thank you for devoting your time to building it! Just a quick question – by default the plugin detects change of section and updates link in navigation when the section hits the middle of the viewport. Is there any way of changing it to the bottom of the viewport so that links get updated as soon as a section enters the viewport?

Not sure if you’re using plugin’s WordPress version or not(?)
You could use plugin’s target_ parameters to manually set the highlight position of each target element – more info.

For example, you could create a js function that calculates the position and length of each target and set the target_ parameter dynamically. This of course depends on how your sections are set but the following function should normally work.

I’m not sure why you want to start highlighting the links/sections the moment they enter the bottom of the viewport(?) The plugin is set to use a visual logic, meaning that highlight occurs when the section is within user’s actual visual field (approx. at the middle of the viewport).

For instance, it’s normal that when a user reads the bottom of section 1, he has already scrolled past the point of where section 2 appears on the screen. This of course depends on your layout but in general, when a user starts viewing/reading a section, this section’s top is at (or has passed) the vertical center of the screen.

Thank you for the extensive reply, I will try your script out. Apologies I should have mentioned I am using the jQuery version. The reason for my request is that I have a navigation in the top left corner which I would like to change colour depending on the background of each section. If section 1 is light and section 2 is dark, the navigation changes to light half way through the screen. So the fixed navigation at the top of the screen becomes light when in fact it still is on a light and not dark background since we can still see the lower half of section 1..

I am having trouble with the position:fixed navbar on mobile with a horizontal scrolling site. i came back to see how you handled it, and see that you have the same issue—the nav slides off to the left as you scroll. Any ideas on how to fix? I’ve tried backface-visibility and translateZ suggestions from other sites.

I can’t see the navigation menu scrolling with the page on the demos… The fixed element stays fixed (as it should). I’ve checked it on iPad, Windows Phone etc. Does it happen on a particular device/OS/browser?

The scrollTo function can be used within your own scripts and functions (or within scripts by the theme and other plugins). There’s no difference in using the method within WordPress or not. If you have the plugin activated, scrollTo method will work.

To replicate the layout and functionality on the link you posted, you have to create the one page template along with the javascript functions that’ll hold the events for keyboard arrows and bullet indicators. Within those events you could use the scrollTo method.

There’s no automatic way of doing all these unless you use a WordPress theme that includes such template.

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.

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 li.menu-item-4583 > a{
color: #00e6b4;
}
Thank you.
website: http://www.greenstinct.com

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.

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

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?

«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