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.5.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" });

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.
http://opensource.org/licenses/MIT

Pages: 1 2 3 4


512 Comments

Post a comment

Comments pages: 1 2 3 4 5 6

  1. Thomas
    Posted on May 13, 2015 at 14:19 Permalink

    Dear Malihu,

    First off all thank you for developing this great piece of software.

    My question:

    I have set an integer value of 15o for the offset option in the configuration, to account for the height of the floating menu I have on my website.

    Here is the thing though. The menu’s height is shorter than 150px from the screen width 400px.

    Is there a way to adjust the script to account for different screen widths.

    Thank you.

    Reply
    • malihu
      Posted on May 13, 2015 at 21:02 Permalink

      Hello Thomas and thanks for your comments.

      You can set the Offset value as a function. For example:
      $(selector).mPageScroll2id({ offset:function(){ return offsetFn(); } }); function offsetFn(){ if($(window).width>400){ return 150; }else{ return 100; } }

      Does this help?

      Reply
      • Thomas
        Posted on May 18, 2015 at 05:00 Permalink

        Hi Malihy,

        Thank you for directing me to this page and comment from my other comment on the other page. And thank you for replying.

        I do have some trouble implementing your code snippet.

        This is what I have now, but it doesn’t seem to respond to window width command:

        (function($){
        $(window).load(function(){
        $(“a[rel=’next’]”).mPageScroll2id({
        offset:function(){ return offsetFn();
        }
        });

        function offsetFn(){
        if($(window).width>600){
        return 250;
        }else{
        return 155;
        }
        }

        });
        })(jQuery);

        It only responds to the 155 command the first one of 250 is ignored regardless of the window width

        Reply
        • malihu
          Posted on May 18, 2015 at 11:04 Permalink

          Ah! sorry Thomas my bad…

          Change:
          $(window).width
          to:
          $(window).width()

          Reply
          • Thomas
            Posted on May 18, 2015 at 15:36 Permalink

            Thanks Malihu,

            It works! Great.

  2. Abot
    Posted on April 24, 2015 at 18:48 Permalink

    Hi,
    I have a problems

    how to scroll section from right to left, my mean is this plugin by default scroll from left to right but i wanna the page start from right! and scroll to left!

    Reply
    • malihu
      Posted on April 29, 2015 at 12:44 Permalink

      Hi,

      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");

      Reply
  3. Tim
    Posted on April 20, 2015 at 18:25 Permalink

    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.

    Any ideas? Thanks.

    Reply
    • malihu
      Posted on April 20, 2015 at 20:18 Permalink

      Hi,

      Did you changed your links? I can’t see any links that point to an id…

      Reply
  4. Rokas
    Posted on April 8, 2015 at 00:31 Permalink

    Hi Malihu,

    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.

    How could I achieve this? Any ideas?

    Thank you in advance,
    Rokas K

    Reply
    • malihu
      Posted on April 8, 2015 at 00:58 Permalink

      Hello,

      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

      Reply
      • Rokas
        Posted on April 8, 2015 at 14:07 Permalink

        Hi,

        Thank you for replying! It was the first thing I tried, but then I can’t get it to work on the Homepage.
        So both ways it’s either this or that.

        I have change it now, so you can have a look and see what I mean.

        Any ideas?

        Thank you,
        Rokas

        Reply
        • malihu
          Posted on April 8, 2015 at 14:32 Permalink

          This seems weird… I get a console error in line 392 of index which might be related to this
          window.location.reload(http://www.esatis.info/#/)

          Can you remove this code and try again?

          Reply
          • Rokas
            Posted on April 17, 2015 at 17:12 Permalink

            Hi,

            Removed it. Didn’t work :/

            What could this be then? Very strange.

            Rokas

        • malihu
          Posted on April 18, 2015 at 00:46 Permalink

          Can you also remove the very first blank line above the doctype declaration in your HTML?

          Reply
  5. Urs
    Posted on April 7, 2015 at 19:03 Permalink

    καλή μέρα Malihu

    great plugin! Thanks a lot for this!

    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 😉

    But with … :

    function scrollToSection ( scrollTarget ) { $.mPageScroll2id("scrollTo", scrollTarget, { onStart:function(){ console.log('start'); }, onComplete:function(){ console.log('end'); } }); }

    … 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?

    Thanks for any hint!

    best regards,
    Urs

    for the moment, the test page is here:
    manga.rooster.ch/scroll2id.php

    Reply
    • malihu
      Posted on April 7, 2015 at 19:51 Permalink

      Hello,

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

      Reply
      • Urs
        Posted on April 8, 2015 at 14:20 Permalink

        Hi,
        thanks very much for your very quick answer! It helped me a lot!
        best regards, Urs

        Reply
  6. shazrimey
    Posted on April 7, 2015 at 12:16 Permalink

    Thanks malihu, great post!! One thing though, how do i add mousewheel scrolling when i already have lightbox jquery and id scroll jquery?
    here’s the script i use:
    <script><!--ID SCROLL--> $(function(){ $(window).load(function(){ $("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({ layout:"horizontal", highlightSelector:"#navigation-menu a" }); $("a[rel='next']").click(function(e){ e.preventDefault(); var to=$(this).parent().parent("section").next().attr("id"); $.mPageScroll2id("scrollTo",to); }); $("a[rel='m_PageScroll2id']").mPageScroll2id({ layout:"horizontal" }); }); }); $(function(){<!--MOUSEWHEEL--> $("#container").wrapInner("<table cellspacing='30'><tr>"); $(".mainContent").wrap("<td></td>"); $("body").mousewheel(function(event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); }); </script> <script><!--LIGHTBOX--> $(function() { $('[rel="lightbox"]').lightbox(); }); </script>
    Thanks in advance for your help! So sorry to waste your time on something this simple.

    Reply
    • malihu
      Posted on April 7, 2015 at 15:46 Permalink

      Hi,

      It depends on what exactly you’re trying to do but you can use plugin’s scrollTo in your mousewheel function. I can’t really say what you should do as I don’t know what you want to do…

      Reply
      • shazrimey
        Posted on April 8, 2015 at 03:44 Permalink

        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! 🙂

        Reply
        • malihu
          Posted on April 8, 2015 at 14:47 Permalink

          Are you trying to scroll an overflowed div/section or the whole page?

          Reply
          • shazrimey
            Posted on April 10, 2015 at 04:50 Permalink

            I’m trying to scroll the whole page. Using mousewheel. Seems impossible? Cause I’m no familiar with these things..

        • malihu
          Posted on April 10, 2015 at 15:38 Permalink

          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

          Reply
          • shazrimey
            Posted on April 11, 2015 at 06:46 Permalink

            hey thanks! great help. I guess I can do that. Thank you very much 😉

  7. nurulshahada
    Posted on April 2, 2015 at 09:26 Permalink

    hello malihu! helpful article you have here! been helping me out for the website im currently doing.
    i’m doing a horizontal scrolling website, just like your demo shows. the only different is that i have this left sidebar menu to navigate through pages.
    here’s the coding i use:
    <div id="container"> <div id="sidebar"></div> <div id="onepage"> <div class="navAbout"> <div class="navAbout"> <table style="vertical-align: middle;" width="250" border="0"> <tr> <td scope="col"><table width="964" border="0"> <tr> <th width="37" scope="col">&nbsp;</th> <td width="870" scope="col"><a href="05 About Us.php"><img src="navigator.png" width="17" height="17" alt="nav"></a><img src="line.jpg" width="830" height="15" alt="hoz"><a href="#ourspeciality"><img src="navigator.png" width="17" height="17" alt="nav"></a></td> <th width="43" scope="col">&nbsp;</th> </tr> </table> <table width="962" border="0"> <tr> <td width="116" scope="col" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:12px;">About Softworld</td> <th width="737" scope="col">&nbsp;</th> <td width="95" scope="col" style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:12px;">Our Speciality</td> </tr> </table></td> </tr> </table> </div><!--THE TOP NAVIGATION PLACED HERE--> </div><!--END TOP NAVIGATION--> <div id="aboutus" class="mainContent"> <!--LOREM IPSUM--> </div> <div id="ourspeciality" class="mainContent"> <!--LOREM IPSUM--> </div> <div class="footer"></div> </div><!--END ONEPAGE--> </div><!--END CONTAINER-->

    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.

    Reply
    • malihu
      Posted on April 2, 2015 at 09:50 Permalink

      Have you tried padding-left?

      Reply
      • nurulshahada
        Posted on April 3, 2015 at 11:05 Permalink

        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.

        Reply
      • nurulshahada
        Posted on April 4, 2015 at 03:42 Permalink

        Heyy.. Turned out you fixed that problem with padding-left!! I thought it’s similar to margin. I’m sorry for the trouble. Thanks again!!

        Reply
        • malihu
          Posted on April 4, 2015 at 06:12 Permalink

          No problem 🙂

          Padding usually works because it’s part of the element (while margin is not). So when you get the element’s left position, it’ll include its left padding padding.

          Reply
  8. Rob
    Posted on March 7, 2015 at 20:19 Permalink

    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.

    Any ideas? Thank you for the great work!

    Reply
    • malihu
      Posted on March 8, 2015 at 23:17 Permalink

      The wp plugin was last updated in November and works well with latest wp version (4.1.1).

      By what you describe it doesn’t seem like an issue with “Page scroll to id”, as the plugin script does not modify link’s href attributes.

      Are your links point to the exact same/parent address? Is another plugin generating your links?

      Reply
  9. Yoh
    Posted on March 4, 2015 at 00:20 Permalink

    Is it possible to use horizontal and vertical scrolling both on same page?
    What I want is smt like two columns (horizontal here) and few sections in every column (scrolling vertical this time).

    Reply
    • malihu
      Posted on March 4, 2015 at 01:27 Permalink

      Yes by setting layout option parameter to “auto”:
      layout: "auto"

      Reply
  10. manuel
    Posted on March 2, 2015 at 14:57 Permalink

    I installed your pretty cool wordpress plugin, but getting some errors in the console (though the plugin works as expected):

    Uncaught TypeError: Cannot read property ‘i’ of undefined
    jquery.malihu.PageScroll2id.js?ver=1.5.9:2

    Do you have any idea, what this could be? Would be great if I could find a fix for this!

    Otherwise: cool plugin, saved me already hours of work!!

    Kind regards, Manuel

    Reply
    • malihu
      Posted on March 2, 2015 at 17:55 Permalink

      This error should not appear if the plugin was working correctly. Can you send a me your link in order to check what exactly happens?

      Reply
  11. Mirko
    Posted on February 25, 2015 at 19:44 Permalink

    Maybe there is such an option, but I don’t see it, so here goes.

    I would like to have a slight delay before each scroll, I especially need this for mobile, because I would first like my off-canvas menu to close and then the scrolling animation to start.

    The way it is setup now, they both trigger at the same time, and it doesn’t look good.

    Thanks!!

    Reply
    • malihu
      Posted on February 25, 2015 at 20:31 Permalink

      There’s no general option to delay scrolling. You’ll need to use plugin’s scrollTo method to trigger a scroll within a script/function.

      Reply
  12. Yerk
    Posted on February 23, 2015 at 20:36 Permalink

    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.

    Reply
    • malihu
      Posted on February 24, 2015 at 14:39 Permalink

      Do you call plugin function on window load as in “How to use it” guide?

      I can’t really say why this happens as I don’t know your markup and CSS but maybe you can fix it by calling a scrollTo method on your first section id after plugin is initialized(?)

      Reply
      • Yerk
        Posted on February 24, 2015 at 20:37 Permalink

        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.

        $(document).ready(function() { enquire.register("screen and (min-width: 801px)", function() { (function($){ $(window).load(function(){ $("#navigation a").mPageScroll2id({ layout:"horizontal" }); }); $.mPageScroll2id("scrollTo","#section-1",{ offset:100 }); })(jQuery); }) });

        Reply
        • malihu
          Posted on February 25, 2015 at 20:56 Permalink

          I’m not familiar with enquire but try changing your code like below and see if it works:
          $(document).ready(function() { enquire.register("screen and (min-width: 801px)", function() { $("#navigation a").mPageScroll2id({ layout:"horizontal" }); $.mPageScroll2id("scrollTo","#section-1",{ offset:100 }); }) });

          Reply
  13. brandon
    Posted on February 12, 2015 at 21:58 Permalink

    thank you for deleting my comment and not helping! 🙂

    Reply
  14. David Bowie
    Posted on February 9, 2015 at 09:02 Permalink

    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.

    ~~~~~~~~~~
    One Elephant is Killed Every 15 Minutes. Guess by Whom?
    http://www.LastDaysofIvory.com
    http://www.facebook.com/video.php?v=10153504073683835

    Reply
    • malihu
      Posted on February 9, 2015 at 18:55 Permalink

      Hello,

      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.

      Reply
  15. Yuvraj
    Posted on February 2, 2015 at 17:21 Permalink

    Hi ,

    The Plugin is really good and lot of features supported.

    Do we have any options to support datatables plugin?

    Thanks,
    Raj

    Reply
    • malihu
      Posted on February 3, 2015 at 14:36 Permalink

      Hello,

      What kind of option? Can you describe what functionality you need in regards to table data?

      Reply
  16. consultnew
    Posted on January 27, 2015 at 14:27 Permalink

    hello

    Sorry to bother you

    Your plugin is awesome.

    But i am facing a slight issue.

    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

    Thank you

    Reply
    • malihu
      Posted on January 27, 2015 at 14:46 Permalink

      Hello and thanks for the comments,

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

      If you can add custom code and need help with the script let me know

      Reply
      • consultnew
        Posted on January 28, 2015 at 12:48 Permalink

        Hi

        I dont think you got the error here.

        I am talking about the DIV >> which has all content visible but overflow is hidden, so on clicking it should scroll within the div and not on the whole page

        Reply
        • malihu
          Posted on January 28, 2015 at 13:01 Permalink

          Oh I see. You won’t be able to do this with “Page scroll to id”.
          The plugin does not work with overflowed elements. It works only with page’s root element (html/body) scrollbar.

          Reply
          • consultnew
            Posted on January 28, 2015 at 13:12 Permalink

            Ok

            Thats fine.

            if you cant control that..
            is there some way i can turn it off. ?

            since the page now scrolls to the height of the hidden area.. ! way way below the Box

        • malihu
          Posted on January 28, 2015 at 13:34 Permalink

          You’ll have to change the “Selector’s” value from “a” to a more specific one which does not include the links that scroll the overflowed div. This is the only way as “a” selects all anchor tags.

          Maybe you can add a class to those links (e.g. “my-class”) and add in “Selector’s”:
          a:not(.my-class)

          Reply
        • malihu
          Posted on January 28, 2015 at 13:38 Permalink

          Or maybe you can simply add a specific selector for the page scroll to id links which would depend on your theme. For example:
          .menu-item a[href=*'#']

          Reply
  17. قیمت لاستیک خودرو
    Posted on January 27, 2015 at 06:33 Permalink

    Hi !
    Very Helpful for me.

    Tank you.

    Reply
  18. liz
    Posted on January 21, 2015 at 09:10 Permalink

    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?

    Reply
    • malihu
      Posted on January 21, 2015 at 18:31 Permalink

      This happens because you’ve enabled “Keep highlight until next” option in plugin settings. Try disabling it and test again.

      Reply
      • Liz
        Posted on January 27, 2015 at 07:15 Permalink

        Thanks a lot Malihu, it works!

        Reply
  19. Pierre
    Posted on January 8, 2015 at 10:10 Permalink

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

    Please can you help me?
    Thank you so much.
    Pierre

    Reply
    • malihu
      Posted on January 8, 2015 at 14:21 Permalink

      You need to use the offset option parameter (see Configuration) like this:
      $("#menu-header a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:"#navigation-menu a" offset: /* your fixed menu height here */ });

      For example, if your fixed menu id is “navigation-menu”, you can set it like this:
      offset:"#navigation-menu"

      For more info see:
      Using offsets in Code examples

      Reply
  20. Nik
    Posted on December 29, 2014 at 21:42 Permalink

    Great little plug-in but how do I hide the #myanchor from the browser ie. even after clicked, I want the browser link to remain the same eg. http://www.mysite/myhomepage/ and NOT http://www.mysite/myhomepage/#myanchor...

    Your demo here – http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html seems to achieve that without the hashchange but when I implement on my own website the # link is still appearing…

    With many thanks in advance.

    Reply
    • malihu
      Posted on December 29, 2014 at 22:27 Permalink

      Your address bar URL should not change with this plugin (unless you’re using it along with jquery-hashchange or jquery-address plugins). Are you sure you’ve implemented the plugin correctly?

      Reply
  21. Adam
    Posted on December 15, 2014 at 19:17 Permalink

    hi
    The plugin is great and solves a lot of problems.
    My website has pages of varying heights.
    I noticed that the height of the longest pages is assigned other pages.
    Example.
    http://www.kgc.softlike.pl

    The second and subsequent sub is at the bottom of space.?
    How to remove this space?

    Reply
  22. OBD
    Posted on December 8, 2014 at 12:53 Permalink

    Hi
    I tried your script in a fiddle, but can’t get it to work:

    http://jsfiddle.net/orjan/mes8hw12/

    Reply
    • malihu
      Posted on December 8, 2014 at 13:20 Permalink

      Hi,
      The plugin won’t work in fiddle as the links URL are different from the actual address bar and the result runs inside iframe.

      Reply
  23. Carlos
    Posted on December 5, 2014 at 02:59 Permalink

    I’m unable to get the offset to work. I tried adding the data-ps2id-offset html attribute. I need to stop the scroll below my grey nav bar.

    Thanks.

    Reply
    • malihu
      Posted on December 5, 2014 at 03:25 Permalink

      I need more info to able to help (either attribute value and your code or a link).

      Reply
      • Carlos
        Posted on December 5, 2014 at 04:58 Permalink

        Thanks for getting back to me so quickly. I put the link in my first message: http://chdesignsolutions.com/MtSinaiTCEEE-Demo.

        Here the code in question:
        Message from the Director

        Reply
        • Carlos
          Posted on December 5, 2014 at 04:59 Permalink

          <h2><a name="Welcome" rel="m_PageScroll2id" data-ps2id-offset="300">Message from the Director</a></h2>

          Reply
          • malihu
            Posted on December 8, 2014 at 00:20 Permalink

            Maybe in functions.php enqueue scripts or maybe it’s installed as another plugin which you can just disable(?)

        • malihu
          Posted on December 5, 2014 at 05:15 Permalink

          I think that another script handles the page scrolling (not page scroll to id). You can test this by deactivating the plugin and see if clicking your link animates content.

          Reply
          • Carlos
            Posted on December 5, 2014 at 05:24 Permalink

            I think you are right. I’ve been trying to disable the sticky menu script in functions.php, but I’m not a php expert. Any advise?

          • Carlos
            Posted on December 5, 2014 at 05:49 Permalink

            I’m looking at a bunch of Enqueue scripts in functions.php. Is that where I can attempt to disable the conflicting script?

  24. Chris
    Posted on November 21, 2014 at 04:02 Permalink

    Hi Malihu,

    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.

    If I use http://i3.iweb365.org/#contact the highlights don’t work correctly and all menu items on the page are highlighted.

    The code you sent:-

    .menu-item a.mPS2id-highlight{
    background-color: #492bce;
    color: #f18b01;

    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.

    Cheers
    Chris j

    Reply
    • malihu
      Posted on November 21, 2014 at 13:46 Permalink

      Thanks for the comments, I try 🙂

      You have to remove the following CSS (or better comment them):
      .main-navigation a:hover, .main-navigation ul li.current-menu-item a, .main-navigation ul li.current_page_ancestor a, .main-navigation ul li.current-menu-ancestor a, .main-navigation ul li.current_page_item a, .main-navigation ul li:hover > a{ background-color: #492bce; } .main-navigation a:hover, .main-navigation ul li.current-menu-item a, .main-navigation ul li.current_page_ancestor a, .main-navigation ul li.current-menu-ancestor a, .main-navigation ul li.current_page_item a, .main-navigation ul li:hover > a{ background-color: #632E9B; color: #ffffff; }

      and add the above properties to .mPS2id-highlight:
      .mPS2id-highlight { color: #ffffff !important; background-color: #492bce; }

      EDIT:

      A better solution in order to keep hover and current-page states would be to change the CSS (instead of removing it) like this:
      .main-navigation a:hover, :not(.home) .main-navigation ul li.current-menu-item a, :not(.home) .main-navigation ul li.current_page_ancestor a, :not(.home) .main-navigation ul li.current-menu-ancestor a, :not(.home) .main-navigation ul li.current_page_item a, .main-navigation ul li:hover > a{ background-color: #492bce; } .main-navigation a:hover, :not(.home) .main-navigation ul li.current-menu-item a, :not(.home) .main-navigation ul li.current_page_ancestor a, :not(.home) .main-navigation ul li.current-menu-ancestor a, :not(.home) .main-navigation ul li.current_page_item a, .main-navigation ul li:hover > a{ background-color: #632E9B; color: #ffffff; }

      Reply
      • chris
        Posted on November 22, 2014 at 13:29 Permalink

        Hi Malihu,

        Tried that. Deleted the css from the main theme css file and the problem remains the same. The menu tabs home, about, services and contact are all highlighted as active even though they are not.

        Force single highlight is selected in settings but does not seem to do anything.

        I have tried configuring the custom menus in the following formats. This is for the services menu item:-

        1. ‘http://i3.iweb365.org/#services
        2. /#services
        3. #services

        None of the options work. Method 1 and 2 still have the highlighting problem ie. the Services tab is always active.

        Method 3 solves the highlight issue but then the navigation fails if you are on a different page, Blog for example. The Services menu tab then ttys to load http://i3.iweb365.org/blog/#services

        Could this be to do with my server set up?

        When I just use # in the menu link it works as it should, so it’s something to do with the script not being able to differentiate separate items on the same page.

        Cheers
        Chris j

        Reply
        • malihu
          Posted on November 22, 2014 at 14:56 Permalink

          No it’s not about the plugin script. It’s about theme’s css.

          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(?).

          Reply
          • chris
            Posted on November 22, 2014 at 16:43 Permalink

            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.

        • malihu
          Posted on November 23, 2014 at 21:10 Permalink

          Yes, you need to add the plugin highlight class(es) to the css, e.g.:
          .mPS2id-highlight{ background-color: #444; }

          Also, to enable page animation from different pages (e.g. from blog to #about) you should normally enable “Scroll to loaction hash” in plugin settings page.

          Reply
  25. Chris
    Posted on November 20, 2014 at 20:34 Permalink

    Hi, Great plugin.

    Having issues with using links in custom menus.

    If I use ‘#about’ everything works fine on that single page. Highlighting happens correctly, all is good.

    If I use http://i3.iweb365.org/#about which I need to as there are other menu items that go to other pages, the highlights don’t work correctly.

    All the menu items for the locations on the page are highlighted, with the one menu it (Blog) which is different page not being highlighted.

    I am sure it’s not your plugin, so it’s me not understanding how to implement he css correctly I think. Could do with a bit of guidance. Please could you take a look?

    Cheers
    Chris j

    Reply
    • malihu
      Posted on November 20, 2014 at 21:47 Permalink

      Hi,

      In your link (i3.iweb365.org) your href values are in the form of “#about”. Can you change them to absolute ones (e.g. “http://i3.iweb365.org/#about”) to see the issue?

      Reply
      • chris
        Posted on November 20, 2014 at 23:28 Permalink

        Hi Malihu,

        Yes, I have changed the #contact to the full (http://i3.iweb365.org/#contact) so you can see the issue.

        I have checked the ‘Force single highlight’ check box.

        Cheers
        Chris j

        Reply
        • chris
          Posted on November 20, 2014 at 23:32 Permalink

          Sorry didn’t mention that you will now see the ‘Contact’ menu item now has a background colour that is purple, as if it is the current page in the viewing port even when it is not.

          Cheers
          Chris j

          Reply
          • malihu
            Posted on November 21, 2014 at 00:25 Permalink

            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.

        • Chris
          Posted on November 21, 2014 at 02:27 Permalink

          Hi, not sure what you mean.

          Place .menu-item a.mPS2id-highlight{
          color: #f18b01;
          }
          in my css?

          Do I need to replace the theme css completely, deleting the current css. I use a child theme so I guess I would somehow have to over write it.

          Or should I be adding something to that css?

          Cheers
          Chris j

          Reply
          • Chris
            Posted on November 21, 2014 at 02:28 Permalink

            Should have mentioned I did have the css you suggested in the child theme css file.

  26. Eder O SAntos
    Posted on November 15, 2014 at 23:12 Permalink

    Hi there Malihu,

    man, this is a simple and great plugin. Cangratulation!

    I’ve been trying to make it work as a fixed side nav, using just 2 arrows anchors goingup and down, to next or previous sections both by click or using the keyboard.

    It’s been days of work with no luck. If you can give me a light it would be great!

    Cheers from Brasil

    Reply
  27. Steve
    Posted on November 7, 2014 at 21:43 Permalink

    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 🙂

    Reply
    • malihu
      Posted on November 7, 2014 at 22:28 Permalink

      Hello Steve,

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

      If I could see your site/code I’d probably able to help more.

      Reply
      • Steve
        Posted on November 8, 2014 at 06:45 Permalink

        Thank you for your help,
        I just sent you an email contain my source code.

        Reply
  28. mystica
    Posted on November 6, 2014 at 19:13 Permalink

    Hi,
    I have 2 questions/problems.

    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 here
    http://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?

    thanks a lot!

    Reply
    • malihu
      Posted on November 7, 2014 at 03:56 Permalink

      Your #news and #media elements are within divs that are positioned to the left of your container. That’s why when you click either one, they always scroll to the very left.

      #text-12 and #text-4 divs (that contain #media and #news) do not have the same CSS rules as your other widgets (in line 71 of your css). You need to apply the same css on those two.

      Reply
      • mystica
        Posted on November 7, 2014 at 15:05 Permalink

        all right! thanks! i also had to position the inside the tabber widget in order to make it work!
        do you know how to fix the problem about chrome?
        thanks again!

        Reply
  29. Adam
    Posted on October 27, 2014 at 22:48 Permalink

    thanks for sharing, my site http://fit-online.pl are based on joomla engine,
    and i used information above;)

    Reply
  30. Jos Vermeulen
    Posted on October 25, 2014 at 20:02 Permalink

    How can I make the “link relation XFN field” visible in my menu editor?

    Thanks for the help,
    Jos

    Reply
    • malihu
      Posted on October 28, 2014 at 23:55 Permalink

      In WordPress Menus, click ‘Screen Options’ and check ‘Link Relationship (XFN)’.

      Reply

Comments pages: 1 2 3 4 5 6

Post a comment

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