Page scroll to id

Frequently Asked Questions

• Can I use the plugin to scroll an overflowed div?

  No. Page scroll to id scrolls the entire page (the document’s root element) so it works correctly highlighting links, alongside deep linking plugins etc. with mouse and touch events.

• Do you support Internet Explorer 7?

  No and you shouldn’t either (IE7 usage is non-existent). If the script does work on IE7, it’s by pure luck.

• When I click the link, nothing happens or page “jumps” to the target id without animation

  Make sure your link has href value # with the id of the section you want to scroll-to (e.g. <a href="#id" rel="m_PageScroll2id">link</a>) and a section with such an id exists in your page (e.g. <div id="id">target</div>). Check your mPageScroll2id function selector(s) and verify that such links exist in your document. Check the path of jquery.malihu.PageScroll2id.min.js and make sure it’s loaded correctly. Verify that the jQuery version you’re using is 1.6.0 or higher.

• How do I make my links work from other/different pages?

  To make your links work from any page, you need to add the full address in your links href (instead of just the hash with the id). For example, you’ll need to change <a href="#id" rel="m_PageScroll2id">link</a> to something like <a href="http://mysite.com/some-page/#id" rel="m_PageScroll2id">link</a>.

• The page doesn’t scroll exactly where I want

  The script scrolls the page to the top position of your target element. Your target’s top position does not include its margins, so make sure to check your element’s actual position via your browser’s developer tools and change your CSS if needed (e.g. adding paddings on your target). You can also offset the scroll-to position via the offset option parameter.

• The page doesn’t scroll to the very top

  Your target element is probably not at the very top (check its position via your browser’s developer tools). If your link has href value #top and no target with id top exists in your page, the plugin will automatically scroll the page to the very top (the position of the body tag).

• How to prevent my fixed navigation menu overlapping the content?

  Set your menu selector as the value of offset option parameter. For example, if you have a fixed menu with id navigation-menu, set offset to "#navigation-menu" in order to stop page scrolling below it and avoid overlapping your content.

  $("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:"#navigation-menu"
  });
  

• Can I specify link specific offset values?

  Yes, by adding the html attribute data-ps2id-offset to a link. For example, <a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a> will offset scroll-to position by 100 pixels. Note that data-ps2id-offset overwrites the offset option parameter.

• How do I scroll to an id when page loads?

  Use the plugin’s scrollTo method in your script. For example:

  $(window).on("load",function(){
      $("a[rel='m_PageScroll2id']").mPageScroll2id();
      $.mPageScroll2id("scrollTo","#id");
  });
  

• How do I highlight the links in my menu?

  Use the mPS2id-highlight class in your stylesheet. This class is added by the script on links whose target element is considered to be within the viewport. Example:

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

• More than one links are highlighted! How to highlight only the first one?

  Use the mPS2id-highlight-first class in your stylesheet (instead of just mPS2id-highlight). This class is added by the script on the first link whose target element is considered to be within the viewport. Example:

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

  Alternatively, you can use the forceSingleHighlight option parammeter by setting its value to true

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

• How to keep my links highlighted when my target elements have 0 height?

  Set the keepHighlightUntilNext option parammeter to true:

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

  This will keep the highlighted element on until the next one comes into view.

• How can I get the plugin to scroll to the current target on window resize?

  Get the current target by its highlight class and call the scrollTo method to scroll to its id

  $(window).resize(function(){
      var to=$(".mPS2id-target").attr("id");
      $.mPageScroll2id("scrollTo",to);
  });
  

• How can I get the plugin to scroll to URL location hash on window resize?

  Get the location hash and call the scrollTo method

  $(window).resize(function(){
      var loc=window.location.hash,
          to=(loc.indexOf("#/#")!==-1) ? loc.split("/")[1] : loc;
      $.mPageScroll2id("scrollTo",to);
  });
  

• How to use the plugin with WordPress custom/native menus?

  See “Page scroll to id for WordPress”

• How to use the WordPress plugin without editing my theme’s markup?

  See “Page scroll to id for WordPress”

• What if my links have rel values already set?

  You can add the m_PageScroll2id in your link’s rel attribute (along with the other values) and change mPageScroll2id function selector to "a[rel~='m_PageScroll2id']"

• Can I specify link specific animation duration/speed values?

  Yes, by adding the class ps2id-speed-VALUE to the link or to link’s parent element (VALUE indicating the animation duration in milliseconds). For example, <a href="#id" rel="m_PageScroll2id" class="ps2id-speed-700">link</a> will set its animation duration/speed to 700 milliseconds. Note that ps2id-speed-VALUE class overwrites the scrollSpeed option parameter.