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

Hi,
it seems i get a conflict when i use customscrollbar together with scrolltoid
i mean, custom scrollbars work fine, but if i add scrolltoid, the anchors don’t work, just doesn’t happen anything
however, if i use only scrolltoid it works fine (without customscrollbars)
the same happens with the wp plugin
you can see it in action herehttp://www.unioneimpreseitaliane.it/web/
(click on “prova” on the left)
how can i fix that?
thanks!

Hi,
thanks for your reply
sorry for bothering you, but i can’t get it to work
in order to scroll the news box, i have this code:
<script>
(function($){
$(window).load(function(){
//news box
$("#rpwe_widget-2").mCustomScrollbar({
theme:"dark-thick"
});
});
})(jQuery);
</script>

and it works fine
also, the #main div scrolls horizontally as desired
now, i can’t get the menu anchors to work
i have this code:

Scrolling through sections with mouse-wheel has no general scope (no default or standard functionality) and it’s used in very specific situations/layouts. For this reason it cannot be integrated in “Page scroll to id” plugin.

If you need assistance creating such custom script for a specific web page, I can help 🙂

mPS2id-highlight class is added by the plugin script automatically to menu link(s) when their targets are within the viewport when the page is being scrolled.
You can use .mPS2id-highlight directly in your theme’s CSS in order to apply a different style on the highlighted link(s).
More info in Code examples & short tutorials: Links highlighting.

I have kindly asked you via email some support, I have also asked you on this comment board. What I received is a ban! You can now delete this as well, but still I see no reason to why you denied me help. Good luck with your work.

I haven’t received any “spam” comments from you so I don’t know what you mean by “ban”? Please let me know as maybe my spam protection refused your comment if for instance was posted really fast (this happens automatically).

Please consider that I’m not denying help to anyone. Most days I get more support requests than I can handle (many plugins, galleries, scripts, here, on github, on WP forums etc.) on top of doing other work in order to make a living…

One Question: have you ever did something like a “stop scrolling” function for touch/swipe and mousewheel scrolling? So that if the user scrolls down (or up), the scrolling stops on the next section in the given direction? Or do you have planned something like that for a future version?

I have seen your answer concerning the keydown/up question in comment <a href="#comment-17480". Like this way, i can do something similar with some existing jQuery plugins for touch/swipe and mousewheel events, but i would prefer a slim and fast solution instead of using different plugins.

When I scroll down manually the highlight will change when the next section gets into the viewport like it’s supposed to. The problem is when a section does not fill the entire viewport the highlight changes before I want it to. How could I make the highlight wait to change until the next section is more like 75% up in the viewport?

You can use the additional plugin highlight classes, useful when multiple short-height sections come into view. These classes are:
.mPS2id-highlight-first
.mPS2id-highlight-last

In your case, you may need to use .mPS2id-highlight-first instead of .mPS2id-highlight which is added in every link that’s connected to a section within the viewport.

As an example, if you have 3 sections all into view, the html of your links will be like:
<a class="mPS2id-highlight mPS2id-highlight-first">...</a>
<a class="mPS2id-highlight">...</a>
<a class="mPS2id-highlight mPS2id-highlight-last">...</a>

1. how to use together two of your scripts 1) page scroll to id & 2) Custom Scrollbar (full page).

When i use them as single plugin works fine, but when i put them together the page “scroll to id” does not work and the scrollbar(full page) works fine.

and the 2nd

2. how, in “page scroll to id”, can i target with one or two links of a menu to show the id element at the bottom of the screen instead show at the top. I tried offset option but in a different resolution doesn’t show in the right position.

The two plugin’s are not compatible as Page scroll to id works with browser’s native scrollbar. Custom scrollbar plugin has its own set of methods/events, one of them being the scrollTo method which you can trigger in a script like this:$(selector).mCustomScrollbar("scrollTo","#id")

You can set the offset value based on an element selector (e.g. a menu) instead of a fixed number of pixels (this is handy when your menu is responsive). Is this what you need?

i have my link targeting to an id and when i click my link it takes(scroll) me to the id section and naturally it goes at the top of my browser at the beginning of the div id. I want when i click my link to scroll to the specific id but at the bottom of the screen in my browser.

The plugin allows you to set the offset value as an anonymous function. This would work if your sections have a fixed height (e.g. 200 pixels). For example:
$(selector).mPageScroll2id({
offset: function(){
return $(window).height()-200
}
});

I can’t really see another way of doing what you describe or even if this solution does help with your page layout…

As i developed it on a static page it worked like a charm but now in the production environment, the plugin won’t highlight the current menu-item.
What could be the problem? How to the sections are related together (do the navi need the same “href=#section1″ as the section id=”section1”, which I have already!)?

Yes. I know, that if I remove slash befores hash it will be working. But I have page “projects”: http://ebookstory.pl/projekty/ and if you go to “projekty” the menu don’t work, because menu items (except “Co robimy”) has no slash. If menu item has no slash wordpress wont to go to i.e. ebookstory.pl/projekty/#kontakt instead ebookstory.pl/#kontakt

1) I need to replicate the old menu on the left. In your demo the menu is on the top and if I resize the window it moves nicely on the left. I just need to have a fixed menu on the left but I have played with CSS to no avail.

2) Offsetting the content section works for all the sections but not for the first one. I have tried specific offset for the “section1” link, but nothing. Solution?

3) I need to fix the in a centered position but it seems stuck to the section1.

Check if your links and targets are modified by another plugin or script.
You might also check if your entire content resides in an overflowed div instead of the body tag. If you could send me a link I’d be able to provide more help.

You links and/or targets seems to be generated/modified by some other theme script(s). Probably some js script inside dt-presscore theme dir creates/modifies your sidebar menu after ‘Page scroll to id’ plugin is initialized. I don’t know if you can find/edit the script responsible, but if you do, you could add the following jquery code after the menu is ready:$.mPageScroll2id();

First of all, Thanks Malihu!
I’m just a newbie but I have a question which is probably very basic:

I’m using buttons to scroll to different parts of the page and it works great but if I use “Button A” to scroll from point “A” to point “B” and then I use the scroll bar to go back to “Button A” and click it, it won’t scroll.

However, if I click on “Button B” to move from point “B” to point “C” and then use the scroll bar to move to back “Button A” and click it, it will scroll. Seems I can’t get it to work two times in a row (the same thing happens to all buttons). Any ideas?

Hi, Malihu thanks for the plugin. I have been working on WordPress sites for about 7 years and now I couldn’t figure out how to do this. Is it only me? I tried to check if there is any video on youtube and there isn’t any.

This type of instruction would be helpful to me and people like me. Something like this”

– First you should do this and that as a precondition (for eg adding the code m_PageScroll2id into the menu which I read it in WP faq )

– To do this go to this place and do this and that (by giving example etc)

In general I would have been glad if there was a step by step guide even a video walkthrough of the set up.

* I installed the plugin 3 days ago but couldn’t do a thing. If you can post a step by step video in youtube I would appreciate it. Thanks.

Now when I click the links on my homepage its just jumping to the correct position without a smooth effect. Can you help me and tell me what’s wrong with my code?
Ah, one remark: when i analyse my homepage the js seem to be implementet in the correct way…

The plugin requires jQuery version 1.6 or later. The part in your functions.php that prevented it is this:
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false);
wp_enqueue_script('jquery');
as you’re loading jQuery 1.4.1 from Google CDN.

In your second attempt of adding the plugin manually, you need to load jQuery beforejquery.malihu.PageScroll2id.js.
In wp_register_script function, the third parameter is dependencies ($deps), which is an array of the handles of all the registered scripts that this script depends on, that is the scripts that must be loaded before this script. So you could do it like this:
wp_register_script( 'scroller', get_template_directory_uri() . '/js/jquery.malihu.PageScroll2id.js', array('jquery'));

Hi I am trying to implement this on my clients website (sorry its not available for viewing) and I am not able to get the main menu to scroll or anything for that matter. Is it possible it is a conflict?

I tried to add a slideshow within a section, but no luck. When it is in a div, the scrolling effect seemed to be affected. Any luck out there to include any other jquery effect in the scrolltoID? Furthermore, I am looking for an example showing parallax effect with different divs moving in different speeds both horizontally and vertically.

I just tried installing this plugin and it gave me a server error (500). Any idea what’s going on? I’m using pagelines DMS (2) on the latest WordPress. Custom sidebars and ninja forms are the only other activated plugins.

You’d need to write extra code to do that but in my opinion it can be counter-productive without offering anything significant to the user.

Among others, you would need to prevent the browser from keeping history while scrolling (but not when clicking links) because otherwise, you’d need to hit browser’s “Back” button like 50 times to actually go back.

To answer the question, yes it is possible but it would require a more or less complicated script to make it work right while the result could still be questionable.

I’m using it in WordPress now, and I have one problem, perhaps you can help me on this.
I would like to use the hashchange funtion, so copied the code from your demo file to my template.
The page does scroll nicely, but the URL does not change.

So, I decided to use your plugin to navigate on my one-page site, and when it comes to the scrolling and navigation it works like a charm! Thank you for that.

But I’m facing problems with the highlighting. I think that my theme dosen’t allow the plugin to control the highlighting or something. I added:
.menu-item a.mPS2id-highlight{
color: #2ea3f2 !important;
}

To the CSS, and still no difference… My current theme is highlighting all the links connected to an anchor on that page, and I don’t know if I have set everything up correctly. I have left all the default settings in the plugin too.

Sure send me a link.
As a note, if you have many types of links handled by the plugin (e.g. primary navigation links, back-to-top link, next/previous links etc.), you might need to set the ‘Highlight selector(s)’ to the selector you need highlighted (e.g. menu-item a).

While on WP ‘Menus’ admin page, you need to click ‘Screen Options’ and check ‘Link Relationship (XFN)’. Click the arrow on the right of any menu item and insert m_PageScroll2id in the ‘Link Relationship (XFN)’ field. This will add the rel="m_PageScroll2id" to your link(s) which is plugin’s default selector.

«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