This website uses cookies to personalise ads and to analyse traffic ok
web design

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.

Current version 1.6.8 (Changelog)

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)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.malihu.PageScroll2id.min.js"></script>

After files inclusion, call mPageScroll2id function on the matching set of elements (selectors) you want the plugin to handle

<script>
    (function($){
        $(window).on("load",function(){
            $("a[rel='m_PageScroll2id']").mPageScroll2id();
        });
    })(jQuery);
</script>

Using the a[rel='m_PageScroll2id'] selector above, means that the plugin will apply on links with m_PageScroll2id rel attribute value (e.g. <a href="#id" rel="m_PageScroll2id">link</a>). You can change the selector to anything you want (id, class name, js variable etc. – strings that represent ways of choosing elements in the DOM). For multiple selectors, use comma separated values: e.g. a[rel='m_PageScroll2id'], a.class-name, li.menu-item a[href*='#'].

Your links href value should contain # with the id of the section you want to scroll-to and your document should contain sections with such id.

more info

The code is wrapped in (function($){ ... })(jQuery);. This ensures no conflict between jQuery and other libraries using $ shortcut (see Avoiding Conflicts with Other Libraries for more info).

Plugin function is called on window load ($(window).on("load")) so it executes after all page elements are fully loaded, ensuring the script calculates correctly your content’s length.


By default, the plugin scrolls the page vertically. If your page layout is horizontal (demo), set the layout option parameter to horizontal

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    layout:"horizontal"
});

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:

a.mPS2id-highlight{ 
    background: #ff0; 
}

This sums up the basics of implementing Page scroll to id in your project. For help and detailed usage guides see Code examples & short tutorials and FAQ.

Divi WordPress Theme Monarch Social Sharing Plugin

Configuration

Page scroll to id option parameters
Usage $(selector).mPageScroll2id({ option: value });

scrollSpeed: integer
Sets the scroll animation speed in milliseconds (default: 1300).
Example:
$(selector).mPageScroll2id({ scrollSpeed: 900 });
autoScrollSpeed: boolean
Auto-adjusts animation speed according to target element position and window scroll (default: true).
Example:
$(selector).mPageScroll2id({ autoScrollSpeed: true });
scrollEasing: "string"
Sets the animation easing type when page is idle (easings).
Example:
$(selector).mPageScroll2id({ scrollEasing: "easeInOutQuint" });
scrollingEasing: "string"
Sets the animation easing type while page is animating (easings).
Example:
$(selector).mPageScroll2id({ scrollingEasing: "easeOutQuint" });
pageEndSmoothScroll: boolean
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:
$(selector).mPageScroll2id({ highlightByNextTarget: true });
disablePluginBelow: boolean
Disables plugin below [width,height] screen size: boolean, integer, array ([width,height]).
clickEvents: boolean
Enable/disable click events for all selectors (default: true).
Example:
$(selector).mPageScroll2id({ clickEvents: false });
appendHash: boolean
Append link’s href hash value to browser’s URL/address bar when clicked (default: false).
Example:
$(selector).mPageScroll2id({ appendHash: true });
onStart:function(){}
User defined callback function, triggered when scrolling animation begins.
Code examples
onComplete:function(){}
User defined callback function, triggered when scrolling animation is completed.
Code examples
liveSelector: "string"
The matching set of elements that will be handled by the plugin even if they’re not present in the DOM (e.g. dynamic elements that will be added later on).
Example:
$(selector).mPageScroll2id({ liveSelector: "a.my-future-class" });
excludeSelectors: "string"
The matching set of elements that will be excluded from the plugin (i.e. the plugin will not handle these elements).
Example:
$(selector).mPageScroll2id({ excludeSelectors: "a[href^='#tab-'], a[href^='#tabs-']" });

Plugin methods

scrollTo

Usage $.mPageScroll2id("scrollTo","#id");

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.

Plugin dependencies & requirements

  • jQuery version 1.7.0 or higher

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Pages: 1 2 3 4


638 Comments

Post a comment

Comments pages: 1 2 3 8

  1. Robbin
    Posted on May 20, 2014 at 20:47 Permalink

    Hi guys,

    Thanks for a great plugin. I have a question for you:

    I’m creating a site where if you click different items on PAGE 1, you will be forwarded to an anchor on PAGE 2. I’m using the a[href*=’#’] selector.

    The first #anchor I created works great. It is a smooth animation confirming that the plugin works for me. But the other anchors doesn’t work even though I use the exact same function. It doesn’t scroll so I can’t for my life understand what I’m doing wrong, since as far as I understand using the selector a[href*=’#’] it should replace all anchors?

    Doesn’t the plugin support multiple anchors from another page? I just don’t get what the problem is since I’m making it the same way.

    Any help or direction would be highly appreciated.

    Thanks,
    Robbin

    Reply
    • malihu
      Posted on May 20, 2014 at 21:55 Permalink

      It should work. The plugin supports as many anchors as you like. Are the destination/target ids correct? When you say it doesn’t work, what happens? The page “jumps” to location hash or doesn’t scroll at all? I can’t really help unless I see your code (a simple link with your page should be enough).

      Reply
  2. Ariane
    Posted on May 7, 2014 at 23:08 Permalink

    Hi, I really like your plugin. I easily got it to work on 2 of my pages. However it doesnt work on my 3rd page and I cant figure out why. Could you please have a look at http://neuevs.elternvereindonaucity.at/?page_id=763#. aou will see that it works on “Schule” and “Team”. My have to do with the submenu on the left side??? Ans suggestions. Thanx in advance. Ariane

    Reply
  3. Rohan
    Posted on May 6, 2014 at 13:02 Permalink

    We have not installed the plugin yet (because i do not know how to use it once that plugin is installed)

    I have manually placed the codes in the css and header files

    Can you advise a way out to get it working in wordpress?

    Reply
  4. Rohan
    Posted on May 6, 2014 at 13:00 Permalink

    We tried to implement your scroll bar titled non adjustable scroll bar with minor easing (the one with circle bar and blue in color)

    While doing it in HTML, it was implemented well. However, the same code if we copied to wordpress, we not getting that scroll bar
    Can you guide as to the steps to implement it on wordpress?

    Reply
  5. Paul
    Posted on May 4, 2014 at 15:53 Permalink

    Hi Malihu,

    Firstly, great plugin.
    Secondly, I was wondering if you can help with an implementation issue.
    It does work, however every time I scroll I get the console error:
    Uncaught TypeError: Cannot read property 'i' of undefined jquery.malihu.PageScroll2id.js:353

    The line is:
    var o=opt["target_"+t.data(pluginPfx).i],

    Removing .i removes the error and it continues to seemingly work. Any ideas why this is originally occurring?

    Thanks!

    Reply
    • malihu
      Posted on May 4, 2014 at 19:17 Permalink

      Hello,
      Can you send me a link with your implementation so I can check it? Or maybe the code where you call mPageScroll2id?

      Reply
  6. Dave
    Posted on May 2, 2014 at 03:07 Permalink

    This plugin looks like it could be what I have been searching for. Is there a chance I could get the code for the vertical page demo? It would be easier for me to see how it is used and then modify your current layout. If this works for me I will be happy to donate because this is exactly what I want!!! Nice job =)

    Dave

    Reply
  7. Dale
    Posted on April 23, 2014 at 18:12 Permalink

    This plugin looks like it will solve an issue that has frustrated me. A suggestion would be to write better instructions on how to use this plugin for the non-techy wordpress site builders. There are plenty of us out there :).

    Reply
  8. James Mendoza
    Posted on April 16, 2014 at 06:03 Permalink

    Hi,

    We’re trying to implement your WordPress plugin in a Windows server. However, we are always getting an internal server error whenever the plugin is activated. Would you kindly provide insights on how this could be resolved?

    Thank you very much and congratulations to your plugin! 🙂

    Reply
    • malihu
      Posted on April 16, 2014 at 21:36 Permalink

      Hi,
      The plugin requires at least WP version 3.3 and PHP 5.2.

      Reply
  9. Darrell Rogers
    Posted on April 15, 2014 at 05:14 Permalink

    Hi,

    Could you please help?

    The plugin works with the Div id = “footer-widget” but I can’t get it to work with any other ids i’ve got on my page.

    Any ideas?

    Thanks.

    Reply
  10. Wouter
    Posted on April 11, 2014 at 16:17 Permalink

    Hi, scrolling works great on the same page.

    But when I am on a different page and click on a scroll id in my menu, it doesnt go to the same offset point. Both in IE and firefox you end up on totally different spots on the page, but both incorrect to where the id & offset is.

    Can you help? I also posted this in a thread in your worpdress support page.

    Reply
    • malihu
      Posted on April 11, 2014 at 17:05 Permalink

      Hi, I’ve responded on WP forums, but I’m also posting the answer here.

      Page scroll to id does not animate pages based on location hash (at least not directly).
      When clicking a link in the form of ‘mysite.com/page#id’ from another page, the browser “jumps” to the location hash (#id). This is the default browser behavior which the plugin does not affect at all.

      To prevent this behavior and have the plugin handle it instead, you need to create a custom script and place it in your theme/page manually.

      For reference, I’m posting a working script for scrolling to url hash on page load:
      <script> (function($){ if(location.hash){ $(window).scrollTop(0); //stop jump to hash straight away setTimeout(function(){ //stop jump to hash again a bit later //for browser compatibility $(window).scrollTop(0); },1); } $(window).load(function(){ if(location.hash){ setTimeout(function(){ //use page scroll to id scrollTo method //to animate page to location hash $.mPageScroll2id("scrollTo",location.hash); },1); } }); })(jQuery); </script>

      Reply
  11. Dennis
    Posted on April 8, 2014 at 22:35 Permalink

    Hi,

    i am loving it sofar, but there is one thing i am wondering.
    Where do i set the ofset for the navigation so it does not scroll over my content?
    I get your instructions with the code, but not where to put this code.

    Reply
    • Dennis
      Posted on April 8, 2014 at 22:39 Permalink

      Nvm, i needed a break, found it. thanks for the plugin!

      Reply
  12. Bragon
    Posted on April 8, 2014 at 17:49 Permalink

    Hi Malihu,

    I am using your “Page Scroll To Id” plugin for a small website of horizontal layout spread across 3 pages.

    Right now, on loading the website lands on first section. I wish to have the second section as the landing page from where I can navigate to either on the left page or on the right by clicking on the respective links.

    How do I change the section that the website lands on?

    Thanks,
    Bragon.

    Reply
    • malihu
      Posted on April 8, 2014 at 20:16 Permalink

      Hello Bragon,

      You can do this quickly in 2 ways:

      1. Use plugin’s scrollTo method when the page loads. For example:
      $.mPageScroll2id("scrollTo","#section-2");

      2. Use jQuery scrollLeft function to immediately scroll the page (without plugin’s animation) to a pixel value. For example:
      $("html,body").scrollLeft($("#section-2").offset().left);

      Hope this helps

      Reply
      • Bragon
        Posted on April 22, 2014 at 13:53 Permalink

        Thanks Malihu.

        But both the ways in the above solution provided by you, seem to work only for Chrome. For other browsers, the website lands on the first section. How do you think should I get them to work for other browsers?

        Reply
        • Bragon
          Posted on April 22, 2014 at 14:44 Permalink

          Got it to work, using the script that uses the plugin! But one can see the page transition from slide-1 to slide-2 on website loading. I wish it happens so fast that the transition is not seen by the naked eye. Is there a way to set scrollSpeed differentl only for this instance?

          Trying it myself. But any help will be appreciated! 🙂

          Reply
          • malihu
            Posted on April 22, 2014 at 15:03 Permalink

            If you don’t want any page animation use jQuery scrollLeft function:
            (function($){ $(window).load(function(){ $("html,body").scrollLeft($("#section-2").offset().left); }); })(jQuery);

        • malihu
          Posted on April 22, 2014 at 14:57 Permalink

          jQuery scrollLeft() function and plugin’s scrollTo method work on all browsers. Are you calling those on window load (after your page content is loaded)?
          For example:
          (function($){ $(window).load(function(){ $.mPageScroll2id("scrollTo","#section-2"); }); })(jQuery);

          Reply
          • Bragon
            Posted on April 22, 2014 at 15:47 Permalink

            The jquery scrollLeft function works only in Chrome. The plugin’s scrollTo function works for other browsers too.

            So for now I have put both of them, so as to work for both the cases.

            Following is my code that works only for Chrome:

            <script type="text/javascript"> $(document).ready(function(){ $(document.body).scrollLeft($("#section-2").offset().left); }); </script>

            I tried using $(‘html, body’) in case it is the problem regarding use of $(document.body). But it did not make any difference.

        • malihu
          Posted on April 22, 2014 at 17:20 Permalink

          You might need to change: $(document).ready(function(){ to: $(window).load(function(){, so the function triggers when your content is loaded.

          Reply
          • Bragon
            Posted on April 23, 2014 at 12:53 Permalink

            I suppose, technically (window).load triggers AFTER (document).ready. But I have still tried both of these already. The website behaves the same way in both the cases. I am baffled!

        • malihu
          Posted on April 23, 2014 at 14:41 Permalink

          If you could send me a link with your implementation I could take a look and provide more help.

          Reply
  13. JFT5000
    Posted on April 4, 2014 at 17:49 Permalink

    First, thank you for the great plugin! I have a couple small issues that may be my fault, but I can’t be certain… (Note: I am using the WordPress plugin.)

    1. The scroll offset is different when scrolling from top to bottom than it is when scrolling from bottom to top. I think it may be offsetting based on current position. I am not sure though.

    2. I need some clarification on the highlighting of the links… Do I have to add the classes to my CSS? I am just not sure how this is supposed to work and it’s not working by default for some reason.

    Any help is appreciated! Thanks again!

    Reply
    • JFT5000
      Posted on April 4, 2014 at 20:04 Permalink

      It’s also not highlighting the “top” menu item by default or when you scroll back up to it. How can I get that to work?

      Reply
    • malihu
      Posted on April 5, 2014 at 15:19 Permalink

      Hello,

      1. If your offset value is a fixed pixels number, it should always be the same. If you’ve set its value to be an element (e.g. your menu) which is not fixed (e.g. changes its height when you scroll the page), then you might get a different offset.

      2. Yes, you need to add the highlight class in your CSS to style the highlighted/active links. For example:
      .menu-item a.mPS2id-highlight{ /* ... */ }

      In order to properly highlight your links, the “Highlight selector(s)” field in plugin’s settings should be empty (default) or have your menu links selector as its value (e.g. .menu-item a).

      In addition, links highlighting might not work correctly if your target elements have zero height (e.g. if you’re using non-visible divs as your anchor points in the page).

      Reply
      • Julia
        Posted on August 20, 2019 at 16:23 Permalink

        Hello.

        I have a header nemu.
        Menu changes its height when I scroll the page.

        When I click on the link in the menu for the first time, it scrolls with the wrong offset. Menu overrides section content.

        When I click on another link a second time, the offset is correct.

        How to fix the wrong offset on the first click?

        Reply
  14. André
    Posted on April 3, 2014 at 06:33 Permalink

    Hi Malihu,

    The plugin is really nice, but I have a question.

    Is it possible to change menu items to active state while scrolling manually the website?

    Thanks

    Reply
  15. Grant
    Posted on March 15, 2014 at 21:46 Permalink

    I have followed all the instruction from this website:

    http://www.pootlepress.com/2013/02/video-tutorial-a-beginners-guide-on-how-to-create-a-single-page-wordpress-website/

    and many more an I can get it to work

    theme is wynn
    I am using the newest version of wordpress
    single page website using page builder
    made sections and put in the id for each section
    tried adding to each target location
    under the menu made sure
    – url:#section_1
    – Link Relationship (XFN) is on and has ( m_PageScroll2id)

    and all it does is jump to the location what am I missing?

    website is grantmillerdesigns.com

    Reply
    • malihu
      Posted on March 16, 2014 at 20:50 Permalink

      Hello,

      The plugin scrolls the root element (html,body) of the document. Your html is overflow-y:hidden as you’re using a custom scrollbar which scrolls a div (not the root element).

      Reply
  16. Jonathan
    Posted on March 11, 2014 at 01:02 Permalink

    Love the plugin! Lifesaver.

    I used it for a wesbite with Salient theme and it worked perfect. I made the selector:
    a[href*=’#’]

    and added this through the text tab of a page:

    and finally tested by typing in the page url followed by /#about

    HOWEVER.

    Followed the exact same process for another website (using Themetastic Theme) and it doesnt scroll to where my anchor is. Do you have any idea why?

    Thanks again!

    Reply
    • Jonathan
      Posted on March 11, 2014 at 01:44 Permalink

      HERE IS CORRECTION TO ABOVE WITH MISSING LINE:

      I used it for a wesbite with Salient theme and it worked perfect. I made the selector:
      a[href*=’#’]

      and added this through the text tab of a page:

      and finally tested by typing in the page url followed by /#about

      Reply
    • Jonathan
      Posted on March 11, 2014 at 01:46 Permalink

      This is what isnt showing up:

      < div id="about"> </div>

      Reply
    • malihu
      Posted on March 11, 2014 at 06:45 Permalink

      I’d have to see your page in action in order to provide any help.
      Does the page jump to the anchor without animation? Does the page animate but not exactly where you want? Do you get any console errors?

      Reply
      • Jonathan Wield
        Posted on March 11, 2014 at 23:05 Permalink

        It does not even recognize the anchor, but there are no errors. So when I put in the “about” anchor on the Donette page. I then type in donettemorris.com/donette/#about it just goes to Donette page, but does not recognize there was an anchor.

        This is for Themetastic Theme for http://www.donettemorris.com

        Reply
  17. Telis
    Posted on February 25, 2014 at 14:10 Permalink

    Hello,
    first of all congrats for your great work, this plugin is excellent!

    I would like to ask is there is a way to scroll down and up using the navigation arrows of the keyboard, rather than clicking on the links. (Exactly as in demo, but going to the next section just by pressing “down”)

    Should I be looking for something else, or is there a way to make the plugin work this way?

    Any insights would be greatly appreciated!

    Reply
    • malihu
      Posted on February 25, 2014 at 19:45 Permalink

      Hello and thanks for your comments.

      You could use plugin’s scrollTo method inside a custom script using keydown/up events. You can easily get the current target element by using the .mPS2id-target selector and its siblings using jquery next() and prev().

      For example:
      $("body").bind("keydown keyup",function(e){ //prevent arrows default behaviour on keydown if(e.type==="keydown"){ e.preventDefault(); } //scroll to next/prev sections on keyup (down arrow code is 40, up arrow code is 38) if(e.type==="keyup" && (e.keyCode===40 || e.keyCode===38)){ //get current section var current=$(".mPS2id-target"), //get the id of previous and next sections in an array siblings=[current.prev("._mPS2id-t").attr("id"),current.next("._mPS2id-t").attr("id")], //scroll to previous or next section according to key code to=e.keyCode===38 ? siblings[0] : siblings[1]; //do the actual scrolling using plugin's scrollTo method $.mPageScroll2id("scrollTo",to); } });

      This should work in a page like the demo

      Hope this helps

      Reply
      • Telis
        Posted on March 5, 2014 at 18:06 Permalink

        It really does help..
        And this script can be used with the wordpress version of the plugin as well?

        Reply
        • malihu
          Posted on March 5, 2014 at 18:35 Permalink

          Yes, of course. You just need to insert the script above in your theme manually (probably in your footer.php or header.php).

          Reply
          • Telis
            Posted on March 5, 2014 at 20:14 Permalink

            Sorry to bother you again, I bet you must be fed up with code noobs 🙂

            So here is my test page http://teliss.heliohost.org/ntagiopoulos/?page_id=1547

            link1 [ps2id url=”#id1″ rel=”m_PageScroll2id”]link1[/ps2id] goes to target1 target1 and link2 [ps2id url=”#id2″ rel=”m_PageScroll2id”]link1[/ps2id] goes to target2 target2

            this is the code I inserted in the footer

            (function($) {
            $(“body”).bind(“keydown keyup”,function(e){ //prevent arrows default behaviour on keydown//
            if(e.type===”keydown”){ e.preventDefault(); } //scroll to next/prev sections on keyup (down arrow code is 40, up arrow code is 38)//
            if(e.type===”keyup” && (e.keyCode===40 || e.keyCode===38)){ //get current section//
            var current=$(“.mPS2id-target”), //get the id of previous and next sections in an array//
            siblings=[current.prev(“._mPS2id-t”).attr(“id1”),current.next(“._mPS2id-t”).attr(“id2”)], //scroll to previous or next section according to key code
            to=e.keyCode===38 ? siblings[0] : siblings[1]; //do the actual scrolling using plugin’s scrollTo method//
            $.mPageScroll2id(“scrollTo”,to); } });

            It works fine with clicking, but obviously I need to change something to make it work with the keys, I just can’t figure out what. If you feel like it, give me a heads up.
            Cheers

        • malihu
          Posted on March 6, 2014 at 03:51 Permalink

          You have some typos in your code (see console errors in developer tools).
          a) You skipped })(jQuery); at the end of the script and
          b) You should also change .attr("id1") and .attr("id2") to .attr("id") as you don’t need to insert the exact ids (.attr(“id”) function gets the id of an element). The script automatically gets the next and previous ids according to the current target.

          The full script:
          <script type="text/javascript"> (function($){ $("body").bind("keydown keyup",function(e){ if(e.type==="keydown"){ e.preventDefault(); } if(e.type==="keyup" && (e.keyCode===40 || e.keyCode===38)){ var current=$(".mPS2id-target"), siblings=[current.prev("._mPS2id-t").attr("id"),current.next("._mPS2id-t").attr("id")], to=e.keyCode===38 ? siblings[0] : siblings[1]; $.mPageScroll2id("scrollTo",to); } }); })(jQuery); </script>

          Reply
  18. Chris Schultz
    Posted on February 19, 2014 at 01:49 Permalink

    Hey!

    Love the plugin. Using it within the Elegant Theme’s ‘Divi’ theme. Question. In the settings, I can’t seem to get the offset to work & I’ve tried everything. I’m not too sure why it’s not loading the offset. Any ideas?

    Reply
    • malihu
      Posted on February 19, 2014 at 14:40 Permalink

      Hello,

      Is the offset value a number or an element selector? If it’s a selector, make sure it’s the correct one. I can’t really help unless I see your page.

      Reply
  19. Josh
    Posted on February 18, 2014 at 00:04 Permalink

    Hi

    Great plugin.
    I’m using it on a responsive(css media queries) wordpress site I’m developing and have a question about offsets.

    Is there a way I can use the offset functionality only when the browser window is below a certain pixel width.?

    My layout changes below 800px and I only need the offsets for this point and below, (on desktop working fine).

    I also have some stuttering during scrolling on iPhone – any thoughts as to what could be causing this?

    Any help greatly appreciated.

    J

    Reply
    • malihu
      Posted on February 19, 2014 at 16:13 Permalink

      Hi,

      If you have some way of differentiating your menu selector, e.g. a class that is only applied in your menu when the viewport is less than 800px, you could use that class in the ‘Selector(s)’ field in plugin settings.

      If you don’t have a way of differentiating your menu selector, you could create a custom script that does this via $(window).resize(), but you’d have to implement it in your theme manually (let me know if you need help creating such script).

      I can’t really say why there’s a stuttering animation on iPhone. If scrolling works well on desktop, probably the iPhone struggles with some graphics and/or css rules (e.g. shadows). The animating performance usually depends on the content you’re animating.

      Reply
      • Josh
        Posted on February 23, 2014 at 19:17 Permalink

        Thanks for the reply. I think a custom script to differentiate menu selector would be needed. Any help in creating this would be very welcome.

        Where do I start?

        Reply
        • malihu
          Posted on February 24, 2014 at 07:47 Permalink

          First, you’ll need a script that adds a class (e.g. “menu-with-offset”) to your menu, when the viewport is less or equal than 800 pixels:
          $(window).bind("load resize",function(){ var viewport=$(this).width(), //window width menu=$("#navigation-menu"), //menu selector classname="menu-with-offset"; //the class to toggle if(viewport<=800){ menu.addClass(classname); }else{ menu.removeClass(classname); } });

          Add the above script before the closing body tag or in your document’s head tag, after jquery inclusion.

          Then, go to Page scroll to id settings page and insert the class selector in the Offset field:
          .menu-with-offset

          This tells the script that the offset value is the .menu-with-offset element height, which exists only when the viewport <= 800px.

          Reply
          • Josh
            Posted on February 24, 2014 at 16:30 Permalink

            Thank you so much. That works perfectly.

  20. Mario
    Posted on February 16, 2014 at 16:07 Permalink

    Hi! Your plugin works really good, I really like it. Have you ever experienced issue with ipad?
    I’m working on a website using a pro template from themeforest (salient), and your plugin works perfectly both desktop and iphone, but on ipad it start the animation and after few pixels it stops (keeps loading though). I’m using it for a single page, linking from the menu. this issue happens both landscape and portrait mode (this one uses the same kind of menu as iphone).

    I was just curious about ipad issues, i know that with these few infos is not possible to solve..i checked your demos on ipad and they work fine. anyway great job!

    cheers

    Reply
    • malihu
      Posted on February 16, 2014 at 16:31 Permalink

      Hi,
      I haven’t experienced any issues with iPad. I’ve tested the plugin on an iPad 2 (iOS 7). What iOS and iPad have you tested it on? If you’re page is based on responsive design, maybe the issue comes from some CSS rule (does it work well on desktop?).

      Reply
  21. Jack NUMBER
    Posted on February 14, 2014 at 15:39 Permalink

    Many thanks for your work, this plugin is awesome!
    I have a question: how can I change the hash on the URL when the user scrolls with it mouse? (it only changes when the user click on the #navigation-menu’s buttons).

    Thank you.

    Reply
    • malihu
      Posted on February 16, 2014 at 16:41 Permalink

      Are you using a deep-linking plugin (as in the demos)? Page scroll to id does not change the hash in the address bar, so you’d need to do this using the deep-linking plugin inside a window scroll event.

      Reply
      • Kir Kanos
        Posted on May 12, 2014 at 16:58 Permalink

        Actually i tried to use pushStates and location.hash to automatically change the url when scrolling from section to section, by the link or using the mousewheel.
        The whole thing is counter-productive because the back button would store any targeted section. And produce contiguous sequences (1-2-3-4-5-4-3-2-3-4-5-6-5-4-3-2-1-etc).
        I’m going to try something else. With a timing, i would not catch the fly-by sections until i stay on one more than n seconds. Then, the back button would send me to the section i stationed on, long enough to lock my interest.

        Reply
        • Murk
          Posted on May 17, 2014 at 19:04 Permalink

          Hi Kir Kanos, did you try replaceState instead of pushState? ‘replaceState’ does not add an entry to the browser history.

          Reply
  22. Justin
    Posted on February 14, 2014 at 11:33 Permalink

    Why can’t scroll with animation, just jump to the id, but no scroll.
    Do I missed something?

    This page: http://www.youidraw.com/

    Please help me check it, thanks!

    Reply
    • malihu
      Posted on February 14, 2014 at 14:33 Permalink

      You need to call mPageScroll2id function on your selectors (see “How to use it”):
      $("a[rel='m_PageScroll2id']").mPageScroll2id();

      Reply
      • Justin
        Posted on February 24, 2014 at 05:39 Permalink

        I’m sorry for I’m a novice.
        Where I need to put this code?
        Would you like to let me know the detail?
        I can’t understand clearly about “how to use”.

        Reply
        • malihu
          Posted on February 24, 2014 at 07:59 Permalink

          Sure,

          In your document’s head tag, after line:
          <script src="js/jquery.malihu.PageScroll2id.min.js"></script>
          add the following:
          $("a[rel='m_PageScroll2id']").mPageScroll2id();

          This tells the script that links with “m_PageScroll2id” rel attribute value are handled by Page scroll to id.

          Reply
          • Justin
            Posted on February 24, 2014 at 08:28 Permalink

            Still can’t got the scroll animation, just only jump to that position.
            some code :
            ——————
            (function($){ $(window).load(function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery);
            ———————-

            ———————–
            <a href="#home" rel="nofollow"></a> <a href="#drawing" rel="nofollow"></a> <a href="#logocreator" rel="nofollow"></a> <a href="#painter" rel="nofollow"></a> <a href="#comingsoon" rel="nofollow"></a>
            ————————–

        • malihu
          Posted on February 24, 2014 at 09:32 Permalink

          I can’t see the code anywhere in your link (http://www.youidraw.com/).
          Your links should also have rel attribute “m_PageScroll2id”, just like in the link you posted. If you have multiple rel values in your links, you can use the ‘~’ symbol in your selector(s).

          <script src="js/jquery.malihu.PageScroll2id.min.js"></script> <script> (function($){ $(window).load(function(){ $("a[rel~='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery); </script>

          —————–

          <a href="#home" rel="nofollow m_PageScroll2id"></a> <a href="#drawing" rel="nofollow m_PageScroll2id"></a> <a href="#logocreator" rel="nofollow m_PageScroll2id"></a> <a href="#painter" rel="nofollow m_PageScroll2id"></a> <a href="#comingsoon" rel="nofollow m_PageScroll2id"></a>

          Reply
          • Justin
            Posted on February 24, 2014 at 09:53 Permalink

            Oh, sorry. I removed the code from the online site, because when I add this code $(“a[rel=’m_PageScroll2id’]”).mPageScroll2id();
            The icon link won’t work, when I remove the code, it worked. But no scroll, only jump. I don’t know why.

        • malihu
          Posted on February 24, 2014 at 09:58 Permalink

          In any case, make sure you have the code I posted above in your page. The scripts go in the head tag and your links in the body.

          Reply
          • Justin
            Posted on February 24, 2014 at 10:36 Permalink

            I follow your steps to add scripts and uplaod to website: http://www.youidraw.com/
            But it can’t work, Please help me.
            I really love your plugin so much.

        • malihu
          Posted on February 24, 2014 at 11:01 Permalink

          I see. The thing is that the plugin cannot work because your body has overflow: hidden. Page scroll to id scrolls the entire page (the root element which is either the body or html tag) and not overflowed elements. In your page, you’re scrolling the #layout_center div.

          If you remove the overflow: hidden css rule from the body and the overflow: scroll from #layout_center, you’ll see the page scrolling correctly. To make your menu sticky, you should use position: fixed on it.

          Reply
          • Justin
            Posted on February 24, 2014 at 11:26 Permalink

            Hi, Thank you so much for your patience.
            But I removed hidden from body css, and add scroll for #layout_center, still can’t work.

            Do I missed something?

  23. Praveen Agarwal
    Posted on February 13, 2014 at 12:49 Permalink

    Dear Sir,

    Your plugin is really awesome…
    But I am facing problem in changing scrolling direction to up.
    I mean to say that I need to scroll up instead of scrolling down.

    Are there any suggestions ?
    Thanks in advance…

    Praveen Agarwal

    Reply
    • malihu
      Posted on February 13, 2014 at 14:10 Permalink

      Hello,

      The plugin does not scroll by direction. It scrolls the page (up or down) according to your target element position. The page will scroll up when your target element is above your link or when page is already scrolled to the bottom.

      Reply
  24. Vicente
    Posted on February 11, 2014 at 12:08 Permalink

    Hi! First at all, the pluggin is awesome. But now, I just trying to fix the highlight in the menu primary. When I activate the pluggin every element of the menu are highlight I can’t force one highlighted element at a time. Is there a solution?

    Thanks for your time.

    Reply
    • malihu
      Posted on February 11, 2014 at 15:48 Permalink

      Links highlighting depends on how the page is layed-out. When all links are highlighted, it means that all sections are within the viewport (all sections are visible).

      If checking Force single highlight in plugin settings doesn’t fix it, you’ll probably need to add the plugin in your theme manually or use the .mPS2id-clicked class (instead of .mPS2id-highlight) which is added to a link when clicked.

      If you can edit your theme and add the plugin manually, you can define when each section is highlighted via the target option parameter (more info).

      Reply
  25. Joerg
    Posted on January 29, 2014 at 12:37 Permalink

    Great! Thanks for that. I like the auto layout.

    Reply
  26. tjr3217
    Posted on January 23, 2014 at 05:49 Permalink

    Hi,

    I am not getting the scrolling function on the site. It jumps and does not offset. Have set scrolling speed to 5000 to be slow enough to see and have offset things in the admin panel to 100px. Not working. What am I missing?

    Thanks,

    TJR

    Reply
    • malihu
      Posted on January 23, 2014 at 10:39 Permalink
      • Jason
        Posted on July 26, 2014 at 21:28 Permalink

        All is working
        but… whatever my last page is the offset is different
        Im using WP plugin
        How can I change offset for last div or section of page
        and why is the default offset for last page different?
        Thanks – Jason

        Reply
  27. Paul
    Posted on January 22, 2014 at 06:37 Permalink

    Hi Malihu,

    Thanks for the smooth plugin.
    Having an issue though with collapsing the Primary Navigation once a link is clicked.
    Any idea on how to fix?

    http://veniceflake.com/

    Thanks,

    Paul

    Reply
    • malihu
      Posted on January 22, 2014 at 08:59 Permalink

      Can’t really see anything wrong in your link. Did you fix it?

      Reply
      • Paul
        Posted on January 22, 2014 at 09:58 Permalink

        I did, but I am not the best javascript developer.. I had to run two different scripts that basically did the same thing. One was based onResize, and the other onReady.

        Reply
  28. Jason Schmidt
    Posted on January 16, 2014 at 18:16 Permalink

    I love it! The only question I have is, can this be used in the main menu of your wordpress site? I have been able to use it within the same page, but not throughout the overall site. I’m looking for something kind of like lightfarmstx.com – how can we do something like this?

    Reply
    • malihu
      Posted on January 16, 2014 at 18:52 Permalink

      Yes of course. You just need to add the full address in your links href (instead of just the hash with the id).
      In WordPress menus, change the URL field value of your WP menu items from #id to something like http://somesite.com/somepage/#id.

      If your target sections are all on your homepage (just like in lightfarmstx.com), you can simply change your links URL to /#id. The slash in front of the hash translates to your site root (same as http://somesite.com/#id).

      Reply
      • Jason Schmidt
        Posted on January 16, 2014 at 19:13 Permalink

        Thank you so much for your response. 1 more question and I should be good to go, I think.

        If i am using them in the main navigation menu, how would it scroll seamlessly from page to page if the pages are separate? I love your example here: http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html – i want to keep all pages separate so i can easily call for each page to have separate colored backgrounds, etc. to fit nicely on the screen. i also would like to have the pages separate instead of just one continuous page.

        Reply
        • malihu
          Posted on January 16, 2014 at 19:53 Permalink

          What I’d probably do is create my pages normally in WP (as separate pages, so each one can have its own permalink) and create my index (or front-page) which would loop each page content. This way, I’d have a homepage like the demo and still be able to access each page individually.

          As an example, to include a page in your index.php you could do:
          $my_page_id = 2; // page id $my_page_data = get_page( $my_page_id ); echo $my_page_data->post_title; // page title echo apply_filters('the_content', $my_page_data->post_content); // page content

          You could insert such code inside a div and style it accordingly with background, color etc.

          Another approach, would be to create a single-page theme and use a deep-linking plugin but I think the method above is better and much easier to implement.

          Reply
          • Jason Schmidt
            Posted on January 16, 2014 at 21:36 Permalink

            Thank you again for your reply. are you sure that php code is right? I plugged it in and changed the id # – it doesn’t show. I used a plugin to allow me to plant php code straight into the page itself. i did a simple echo “hello world”; to make sure it worked and that did, but the code above didn’t for some reason.

          • malihu
            Posted on January 17, 2014 at 01:37 Permalink

            Yeah, it should work as long as you’ve set the correct page id.

            From wp codex:
            $page_id = 123; // 123 should be replaced with a specific Page's id from your site, which you can find by mousing over the link to edit that Page on the Manage Pages admin page. The id will be embedded in the query string of the URL, e.g. page.php?action=edit&post=123. $page_data = get_page( $page_id ); // You must pass in a variable to the get_page function. If you pass in a value (e.g. get_page ( 123 ); ), WordPress will generate an error. By default, this will return an object. echo '<h3>'. $page_data->post_title .'</h3>';// echo the title echo apply_filters('the_content', $page_data->post_content); // echo the content and retain WordPress filters such as paragraph tags. Origin: http://wordpress.org/support/topic/get_pagepost-and-no-paragraphs-problem

            And since get_page is deprecated, you better use get_post instead
            http://codex.wordpress.org/Function_Reference/get_post

  29. Houston Golden
    Posted on January 8, 2014 at 01:05 Permalink

    Hi Malihu,

    I am using your “Page Scroll To Id” plugin on a website for a client: intercityinvestments.com, and I’m running into an issue with not being able to redirect back to the home-page where I am utilizing your plugin.

    When I navigate away from the homepage to my projects pages under my “Sample of Properties,” my navigation menu, which uses the “#id” to find the DOM elements, is unable to go back and find the element on the homepage.

    For example, when I navigate to http://intercityinvestments.com/project/shoppes-lovers/ I am unable to use any of the other menu-links in my top navigation bar. This seems like a pretty common type of set up, to use the one-page scrolling layout on the homepage, while still having other separate pages, so I was hoping you had a simple solution!

    Thanks so much for the awesome plugin and any help would be GREATLY appreciated!

    Sincerely,

    Houston Golden

    Reply
    • malihu
      Posted on January 8, 2014 at 03:46 Permalink

      Hi,

      I can’t see where you’re using page scroll to id in your link (the plugin isn’t loaded).

      In any case, your links don’t work because they always point to their parent page. For example your “Home” link in “http://intercityinvestments.com/project/shoppes-lovers/” points to “http://intercityinvestments.com/project/shoppes-lovers/#about”. Its href should be “http://www.intercityinvestments.com/”.

      Reply
  30. Herman
    Posted on January 6, 2014 at 00:00 Permalink

    Thanks for the update, the offset is very welcome.

    However, there’s still an issue with any hardcoded offset. As soon as the browser window shrinks and for example a fixed navigation bar is split into two lines, the offset is no longer correct.

    I therefore hacked the previous version of your script with the code posted in the 3rd post here, to dynamically get the heigth of fixed elements, see http://stackoverflow.com/questions/11880318/jquery-script-smooth-scroll-to-different-sections-with-a-different-offset

    Maybe this could be a feature for a future version of your excellent plugin.

    In options, you can additionally set id or class of elements and script determines offset dynamically.

    Best regards,
    Herman Teeuwen

    Reply
    • malihu
      Posted on January 7, 2014 at 20:34 Permalink

      Thanks for the feedback and hack!
      I’ll try adding such dynamic offsets on next version. I was also thinking of an additional data-offset attribute on links for defining specific offset per link in hml. I’ll work on this 🙂

      Reply
    • malihu
      Posted on January 15, 2014 at 18:41 Permalink

      Added advanced offsets in version 1.5.1. The offset option value now accepts numbers, strings, objects, arrays and functions. I’ve also added the data-ps2id-offset for link specific offsets.
      More info: http://manos.malihu.gr/page-scroll-to-id/2/#using-offsets-section

      Reply
      • Herman
        Posted on January 15, 2014 at 22:40 Permalink

        Thanks very much malihu, it works like a charm!

        Reply

Comments pages: 1 2 3 8

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php