Sridhar Katakam

Genesis and WordPress Tutorials

Smooth scrolling between page sections using Page scroll to id

by 14 Comments

Page scroll to id is a great jQuery/WordPress plugin for smoothly scrolling to sections on the same page. Version 1.5.0 of the WordPress plugin was released on Jan 4th and from the change log we can see,

* Added `offset` option: Offsets scroll-to position by x amount of pixels (positive or negative).

If you have ever worked on a page having in-page navigation with a fixed/sticky element at the top you would have noticed that when the page is scrolled the fixed element would be covering a portion of scrolled to section in viewport. The common workaround is to provide a top padding so that at end of scrolling, the section does not appear cut off. But this is not such an ideal solution because the page will end up with unwanted extra spaces between the sections.

A better solution is to use Page scroll to id and set a positive value for the offset. For ex, if offset is set to 100, scrolling will stop 100px above the section.

Here’s an example of using the plugin in Agency Pro, a Genesis child theme to set up smooth scrolling to #home-middle and #home-bottom sections upon clicking nav menu items. Note that the most common scenario in this case would be to use the theme as a single page site with nav links taking the visitor to different sections of the same page.

First let’s disable the smooth scrolling that comes as a part of the theme by commenting out or deleting

$.localScroll({
duration: 900
});
view raw gistfile1.js hosted with ❤ by GitHub

in agency-pro/js/home.js.

Then install and activate Page scroll to id. Go to Settings > Page scroll to id and set the offset to 100.

Edit the navigation menu in which you would like to display links to sections within the page. From the Screen Options pull down, tick Link Relationship (XFN).

Enter m_PageScroll2id in Link Relationship (XFN) field for the menu items and specify their URLs as #home-middle and #home-bottom.

Screen Shot 2014-01-12 at 12.42.36 AM

Add the following in style.css:

.menu-item a.mPS2id-highlight {
background-color: #282828;
border-color: #D7C603;
color: #D7C603;
}
a:focus {
outline: none;
}
view raw style.css hosted with ❤ by GitHub

We are primarily setting the current/active menu item styling to the ‘Our WorK’ and ‘Recent Articles’ menu items when the sections they are linking to come into viewport.

The author wrote that he is going to enhance the offset feature by providing the ability to specify link specific offset values. This would be icing on the cake. Thanks malihu.

Update: He did it.

  • Hello,

    I’ve updated the plugin and extended offset to accept integers and string selectors (for specifying offset according to elements such as fixed-positioned menus). I’ve also added data-ps2id-offset attribute for defining link specific offsets (e.g. data-ps2id-offset=”100″). More info here: http://manos.malihu.gr/page-scroll-to-id/2/#using-offsets-section

    I’ve added a link to this page in plugin’s readme (http://wordpress.org/plugins/page-scroll-to-id/other_notes/). I hope you don’t mind 🙂

    Reply

      • Yes, I want exactly the same buttion as is in the video, with the same function.
        I did this:
        1. disable the smooth scrolling that comes as a part of the theme by commenting out , than
        2. Then install and activate Page scroll to id. Go to Settings > Page scroll to id and set the offset to 100.than
        3. Edit the navigation menu in which you would like to display links to sections within the page. From the Screen Options pull down, tick Link Relationship (XFN).

        Enter m_PageScroll2id in Link Relationship (XFN) field for the menu items and specify their URLs as #home-middle and #home-bottom.

        THan I put your code in to the style.css.

        But result is, I dont see any button and I dont know what I did wrong, cuz Im wordpresser, but just newbie coder.

        X.

        Reply

  • Hi Sridar,

    I am working on site update on LOCAL machine with Centric Pro theme and wanted to add the Page Scroll id for scrolling between the different areas – Home 1 – Home 6 via the Home Menu Links.

    I have also set up the Home Page with Parallax so I am having some issues – getting this to work correctly.

    If I disable $.local scroll in home.js – my front page does not look right…I loose the Full Image size.

    Also with WP 3.8 you can no longer input URL’s into the Menu.

    Can you please update this post to reflect the changes the Plug-in update and WP 3.8 have affected, so that I can
    get this to work on the Centric Pro theme ?

    I appreciate any pointers …..

    Thanks

    Reply

  • This is great, sort of like Easy Smooth Scrolling plugin, but with both plugins I encounter the same error, the menu item scrolling does not work from another page. Ideas?

    Reply

  • Thanks for informations, by the way I’d like bring to your attentions for another nice function.
    On at Gmail’s landing page; here you can see at
    https://www.google.com/intl/tr/gmail/about/#
    As you can see, There is a scrolldown arrow which is on the corner.. Every time you click; a section is sliding down.
    At the end of the page, the function is returning to the top.
    My friend suggested to your article while i searching something like gmail’s arrow.

    Reply
    • >