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.

Thanks for this plugin, it is getting me really close to where I want to go with my site.

I’m still having some trouble getting the scrolling to stop at the top of my elements minus the fixed header height. I’m working on a WP site using the X Theme with cornerstone. Using the WP plugin plus the mouse/keyboard add-in wasn’t working so I’ve added all the scripts in functions.php instead. Now it works in principle, but it is very glitchy, the offset seems to scroll differently for each element, and also differently whether scrolling up (there’s a lot of jumpiness on the way up too), or scrolling down. Can you let me know what is likely to be interfering? I’ve turned off the smooth scrolling plugin that is part of the theme already. Could it be using vh values instead of percent or pixels for calculating element size?

End goal here is to have each mouse/keyboard/touch event scroll one (viewport – header) sized section down or up.

Hey! your plugin is awsome. I used your plugin but i am facing issue with sub-menu in Ipad . If I click parent menu the sub-menu is opened and it is not being closed. can you please help me with the issue? Thanks in advance

Hi, I have an issue with the overflow of the content. I have a bunch of other content on my page, so I only want my horizontal section to scroll left to right, not the rest of content as it just leaves white space. I currently have overflow:scroll to give this effect, but I think this means it does not catch each block as it comes into the view port. I am happy to share URL over email as it is in development and I do not want it in the public domain. Cheers.

I’m wondering if it’s possible to change the background of the menu whenever the page scrolls over each section. An example would be the entire menu would turn yellow when scrolling through section #1. Then the entire menu would turn green when scrolling through section #2, etc. Is that possible with this plugin?

The plugin cannot do this automatically because it’s impossible to know which theme and plugin(s) are used that create or handle the menu(s).

In order to do this, you’ll need custom javascript code developed specifically for your WordPress site and theme.

“Page scroll to id” offers a way of knowing which target section is currently within the viewport (via the highlight classes), so you’d have to create a script that reads this info and applies the desired CSS to your menu on-the-fly (while the page is scrolling).

Creating such script is not overly complicated or hard but you’ll need to hire a web developer to do it (unless you know javascript?). If you’re interested in hiring me please contact me via email.

How can I use page scroll to id when I have multiple pages? when I set on my first pages in menu settings – ex. kmotstudio.com/#scetion-1 it keeps hovering in my menu all the time. how can I use it correctly. so that it hoovers only when I scroll to that section ?

All the themes works on my website but I am not able to see the scroll buttons. Enabled the scroll buttons feature and the mCSB_buttons.png exist in the same folder as CSS file. Can you please guide me where I am going wrong

I have a link which appends a div each time it is clicked inside the scroll bar parent. But each time I click the link the page slightly scrolls to top. Not entirely. But a little. Tried “autoScrollOnFocus” false. But thats nt helping. Any help??

Hi the plugin is great. when I clicked a link from a different page is scrolls smoothly to the correct page correct target. but the id attribute shows in the url. The id removes when clicked the link with in the same page. I use wordpress plugin

The id attribute should be displayed when going to a different page/URL. This functionality follows standard browser behavior and it usually help users as they are able to add bookmarks, use browser’s back/forward buttons etc.

There’s no option to remove the id hash when going to a different page target (at least for now). Is there a specific reason for not wanting the id hash displayed when going to a different page?

Yes. Some SEO articals mention Avoiding hashes in URLs that create separate/unique content is a best practice and my client need that. Anyway thank you very much for instant responces and support and also for the awesome plugin.

This plugin is great, but the one thing I can’t get to work, even when it’s ticked, is the option “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)”.

I have this selected as I am using a fixed top menu for navigation some of my articles, and this behaviour is not applied. The highlight css only is only applied when the link is in the viewport. When I also tick “Highlight by next target” it works slightly better, but only applies the CSS when scrolling, not when still. My site isn’t currently live, I have emailed you the bypass link to see this occuring. Thanks for your help!

Hi Malihu,
Fantastic and light plugin but I have a problem in responsive mode and i cannot solve:
how can I close the menu automatically when I ‘click’ on id menu?
> id click > to have a mobile toggle function
many thank’s

I cannot answer that because it’s out of the scope of the plugin. You can’t do this within the plugin. You need to see if your mobile menu script offers a way to close it on click or you’d need to add an extra custom js script in your page to do this manually.

I’m running into an issue with every anchor link smooth scroll plugin I try to install. The anchor links jump to the page section, but won’t scroll. There could be a conflict with another plugin, but am not sure. Also could be a theme issue—using an older “Gantry” theme.

Under “advanced options”, the “Prevent other scripts from handling plugin’s links (if possible)” box has been checked. No luck with that though.

To see an example, you can navigate to this page and click the HSS logo link (under “strategy”), which should send you to another page and scroll down to the “strategy” paragraph, but currently jumps to the section. At the moment, this is the only “page scroll to id” link I have set up.

If this helps, after clicking the link, the console gives the following error:

page-scroll-to-id.min.js?ver=1.6.2:2 Uncaught TypeError: a[s].match is not a function
at HTMLAnchorElement. (page-scroll-to-id.min.js?ver=1.6.2:2)
at Function.each (jquery.js?ver=1.12.4:2)
at a.fn.init.each (jquery.js?ver=1.12.4:2)
at _scrollSpeed (page-scroll-to-id.min.js?ver=1.6.2:2)
at _scrollTo (page-scroll-to-id.min.js?ver=1.6.2:2)
at HTMLAnchorElement. (page-scroll-to-id.min.js?ver=1.6.2:2)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)

I’ve resolved the issue. Downloaded the developer version of the plugin (https://downloads.wordpress.org/plugin/page-scroll-to-id.zip). Ran into a speed bump trying to upload via the WordPress dashboard. Had to unzip and upload the folder through FTP. Once activated, the newer version of the plugin worked across appropriate links!

I’m unsure how to fix this issue, but the plugin works AMAZINGLY – no complaints : There is simply just a rather annoying interference with the theme I currently have – that I also absolutely love (SYDNEY) on WordPress.
The problem is as follows: The scroll to ID works flawlessly – though instead of stopping so the sticky menu doesn’t overlap it – it simply gets hidden behind. How can I implement a way to make the scroll stop at the MENU rather than the top of the page? Besides this I think this is an absolutely flawless plugin! Great work.

I’ve tried creating rows above my titles (just for the p2id scroller to stop at, though this has been unsuccesful)

Great plug-in. Thank you.
You might have answered this question already (cnfr. Scrolling smoothly from/to different pages etc.) but I do not know how to change the Scroll Speed or how to make it Scroll smoothly.
I’m not on wordpress.

This is happening because your web server is set to remove the trailing slash from the URL automatically. So:http://senderosdemusicas.com/home-food/
becomes:http://senderosdemusicas.com/home-food

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:http://senderosdemusicas.com/home-food#artistas
i.e. remove the slash before the hash (#) and it’ll work as expected 😉

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.

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 });):

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:

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?

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.

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 🙂

«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