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.

You can use plugin’s scrollTo method to scroll-to your last element right after plugin’s initialization. For example:
$("a[rel='m_PageScroll2id']").mPageScroll2id({
layout:"horizontal"
});
$.mPageScroll2id("scrollTo","#last-section-id");

Hi, great plugin! It works really good on my homepage but any other pages it doesn’t work. If you go to http://www.gorcotthall.com and click on any of the items under ‘Home’ you will see the nice scroll. However if you go to another page e.g. http://www.gorcotthall.com/weddings/ and click on any of the items under ‘Weddings’ you will see the page reloads and there is no scroll.

I have used the full URL in my menu links as suggested in a previous post.

Thank you for this great plugin, I found it very helpful and easy to use, however I am having one tiny issue which I am not able to solve on my own.
I would appreciate if you could take a quick look:

On my website: http://www.esatis.info/
I attached ID to the News page (homepage) so it scrolls down to the blog content. It works fine unless you go to other pages, where #id adds up to the perma link instead of going to the homepage.

In other words, while on the homepage it should scroll down to the blog content when clicked on News, and while on other pages, I’d like to make it go to the homepage.

In order to have links work from any page, you need to insert the full URL and not just the hash (#) with the id. For example, you should change the “NEWS” URL from:#naujienos
to:http://www.esatis.info/#naujienos

I have a problem to get the callbacks ‘onStart’ and ‘onComplete’ working.
I have a function, that evaluates where to go (scroll to) when the page (document) scrolls, for example by mouse wheel. So far so good.
If some conditions are met, the document has to scroll down with PageScroll2ID to the next section , stay on the current Section, if minimal scroll distance is not reached and so on.
Still, so far so good everything is working as expected, except the script don’t stop, because the PageScroll2ID fires new scroll events and the page will scrolling complete down.
At this point, my script has to wait, until PageScroll2ID has finished scrolling – that’s where ‚onStart‘ and ‚onComplete‘ walk on stage 😉

… i can’t see any output in the console from the callback functions. Scrolling is working (mPageScroll2id to the target), callbacks won’t.
What i’m missing? What is the ‚little‘ thing i don’t see and i’m doing the wrong way?

The callbacks are defined when initializing the plugin (so they work globally) and not on the scrollTo method, e.g.
//init
$(selector).mPageScroll2id({
onStart:function(){
console.log('start');
},
onComplete:function(){
console.log('end');
}
});
//...later on...
$.mPageScroll2id("scrollTo", scrollTarget)

This way the callbacks work all the time (on user scroll, on scroll-to etc.). If you need to run callbacks only on scrollTo method you can use the mPS2id.trigger object to check if its value is “scrollTo”. For example:
//init
$(selector).mPageScroll2id({
onComplete:function(){
if(mPS2id.trigger==='scrollTo'){
console.log('scroll-to end');
}else{
console.log('end');
}
}
});

Hi! and thanks for the reply. There are three sections in my page. On the second section, I have the portfolio and when I click on the image, it should appear in a lightbox. Throughout my horizontal layout, I want to scroll using my mouse. Also, I need to have the ID scroll to easily navigate between sections. I hope this gives you a clearer image of what I’m planning to do in my website. All other pages I’ve done have no problems combining the ID scroll and mousewheel scroll but this one with the lightbox has it. That’s where I’m stuck. Thanks, Malihu! 🙂

Normally, you’ll have to create a script that scrolls to next element id on mouse-wheel. I can’t post a code example as I’d have to know your markup but basically you have to:
1. Attach the mousewheel event on an element
2. Add a special class to the 1st element
3. On mousewheel event get the id attribute of the element with the special class. Get its next sibling id (via $(“.scpecial-class”).next().attr(“id”)) and scroll to this id (via plugin’s scrollTo method).
4. Move the special class to the scrolled (next) element

the only problem i’m facing is that whenever i click on the top navigation, it links nicely but the title of the section would be placed at the top left of the page. I mean, the sidebar will cover the whole title. i tried margin-left: 300px; but no change. this is my very first website and i’m stuck for a week now. any further help and advises from you is highly appreciated. oh ya, i’m really sorry if it’s unclear here what i want. im using my best english here. ps: not my native language.

I’m sorry for the late reply. Yes I’ve tried it but it just moved the section 1 to 255px from left but when I navigate to Section 2, and navigate back to Section 1, the problem is still there. is it something to do with the script? Thank you so much for the reply.

Has the plugin been updated recently? After just updating WordPress, the scrolling doesn’t work now. The page loads like it’s going to a new page, then reloads the current page and scrolls to the position. Weird because it worked perfectly before updating.

Hi.
Your script works great, but i have one problem with IE (11 tested for now).
I have 6 sections, one page – scroll horizontally.
In IE11, contrary to Fx and Chrome, after load page is set beetween 3 and 4 section – ideal center of the horizontal page. On Fx and Chrome it works as should, start in section1.

Thanks for reply.
My script looks like this for now – scrollto/offset works smt vertically i think? I use enquire for not load scroll on small screens.
It’s proper call for scrollto? IE still start wrong.

Hi Malihu! You’ve created many elegantly beautiful things for us and I appreciate your aesthetic and technical sensibilities 🙂

If I have many pages, performance may suffer. Is there a way to lazy load pages, so the initial user landing is quick and responsive? I’m considering using this for an animal rights site with lots of information 🙂

My current site: http://www.TheZoo.com is horrifically SLOW. Nearly unusable. I want all the information right there! But still mulling over design possibilities.

The plugin does not modify your content or page layout in any way (except adding few classes to links/targets). Lazy loading images is out of the scope of “Page scroll to id” which deals with animating the page.

Any lazy loading plugin should work well with “Page scroll to id”. Depending on your page layout you might need to set a height (or width) value for your images, but this might be necessary with or without the plugin.

Normally, a lazy loading plugin will load images only when they’re within the viewport. “Page scroll to id” animates the page to a target’s top position so you should not have any issues.

I am using a theme, where I cant place “class” or “rel” to all the # links,

So I am using “a” only a tag for the auto scrolling for all # on page
This works great.

The issue is, on the website there is s DVi box with hidden content and there is a text links on top of that content area, #, where on click the user is taken below to the content within this DIV, but since the DIV is hidden, the user is taken to a lot below website area, and the content BOX does not scroll within

This is not an issue that the plugin itself can deal with (especially since you’re using a WP theme).

In any case though, you’ll need to add some custom script in your theme’s header.php or footer.php or js file to make the div visible on click. I don’t know if your theme allows this but if it does, you could add something like:
$(your-link-selector).click(function(){
$(your-div-selector).css("display","block"); //or whatever property used to hide the div
});

Hi there, first of all sorry for my english. This plugin is just what I needed, but I have a little problem: this is my client’s website – dev.ywhynot.es – Not all content in this single page web has a section defined in main menu (the slider is not included in menu items) so, when you are in “Who we are” for example and scroll up to the top (to the slider), “Who we are” section remains active. How can I deactivate active section when you scroll up to the top?

Hello, i want to add a margin at the top of my website when i scroll to a section, because i have a fixed menu at the top.
this is my script
$(window).load(function(){
/* Page Scroll to id fn call */
$(“#menu-header a,a[href=’#top’],a[rel=’m_PageScroll2id’]”).mPageScroll2id({
highlightSelector:”#navigation-menu a”
});
/* demo functions */
$(“a[rel=’next’]”).click(function(e){
e.preventDefault();
var to=$(this).parent().parent(“section”).next().attr(“id”);
$.mPageScroll2id(“scrollTo”,to);
});
});

The thread we were on seems to have lost its reply button. I don’t understand your last reply re if I use ‘#contact’ everything works fine on that single page. Highlighting happens correctly, all is good.

I has already put this in my child theme css but this does not solve the problem. The ccs code is on line 24 to 27 of my hold theme css.

Do you mean I need to delete all the themes css for the navigation menu?

Or should I be adding something like a prefix to the themes existing css?

Do I need to add or amend classes in the original css?

Do I need to add something in the custom menu CSS Classes option in the menu editor?

You referred to the CSS rules on lines 45 and 46 of my html. I cannot find these lines.

I have placed the themes .main-navigation css into my child theme css (commented out) I thought you may be able to point me at what should be amended. It’s on line 28 to 116.

By the way there are lot companies charging a lot of money and they don’t provide anywhere near the quick responses you do. Thanks very much for your work on the plugin and the help you provide to your users.

You deleted/changed the rules from the main theme css file but you have the style also in your html head tag. You must also delete/change the rules from there too (if you right-click your page and view its source, you’ll see the style). Normally, all your styling should be on your main css file but it seems you have it also in the head tag(?).

Hi, yeh I can see the see the css in the head tag. Not sure how or why that is there. I have changed to the standard WP 2014 theme and the css is no longer in the head tag. But the problem now is that when you scroll in the page highlighting does not work at all.

The contact item gets highlighted (blue background) because of the CSS rules on lines 45 and 46 of your HTML.

You should use the background and color rules only on .menu-item a.mPS2id-highlight:
.menu-item a.mPS2id-highlight{
background-color: #492bce;
color: #ffffff;
}

Since your menu links point to the same document (http://i3.iweb365.org/), wordpress cannot differentiate which menu item is the “current” one. That’s why you cannot rely on its “current-menu-item”, “current_page_item” classes and use “mPS2id-highlight” instead.

Hello, Mr. Malihu
First of all, You’ve created a great plugin.
I have an idea about a function but I don’t know how to code it.
My photo page displays 8 posts/page and shows full content of each post. If a post that has height value > 1500px, there will be a button allow you to press to move to next post. So if you don’t want to see a (long) post any more you can move to next post just by one click, not have to scroll your mouse.
I think your plugin can do it but I don’t know how to get the height value of a post and get the post-id of the next post.
Can you help me please, thank you very much 🙂

This will depend greatly on your layout and markup. You can get the height of any element with jQuery height() (e.g. $("#post-id").height()). To get the next sibling post, you can use jQuery’s next() function, for example:var nextID=$("#current-post-id").next().attr("id);

1. in my wordpress site, i added 2 text widgets with the id, in order to make the respective links scroll horizontally. The problem is that the first works, the second doesn’t.
You can see it in action herehttp://www.unioneimpreseitaliane.it/web
“news” works fine, but if you click on “media” (the videos widget) nothing happens
what am i doing wrong?

2. this problems happens only with chrome: if you click on any link on the left sidebar (same website as above), the header slips up some pixels. Do you have any idea why?

«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