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

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.

  • Is it possible to scroll smoothly from/to different page(s)?

    Yes, by adding an extra script posted here.


Plugin home     Project on GitHub

Pages: 1 2 3 4


635 Comments

Post a comment

Comments pages: 1 6 7 8

  1. Steven
    Posted on August 6, 2023 at 00:52 Permalink

    Hello –

    Still loving this plugin. One quick question – is there a way to exclude a specific anchor link? I read in another thread to add an exclusion (see below) but the code below didn’t do the trick.

    a[href$=’#sampleexercises’]

    The anchor link is accessed from a different page and creates a choppy experience where the user is taken to the anchor link, then to the top, then has a smooth scroll down. Would ideally just get rid of the smooth scroll for this one particular link.

    Thanks!

    Reply
    • malihu
      Posted on August 6, 2023 at 16:01 Permalink

      Hello,

      Are you using the WordPress plugin? If yes, you probably need to disable the “Enable different pages scrolling on all links” option in plugin settings. Let me know.

      Reply
  2. James
    Posted on July 27, 2023 at 15:12 Permalink

    Hi Manos

    I have used your script successfully on a few occasions thank you!

    I think I may have asked this question before – apologies if I have.

    Can I set the plugin to smooth scroll automatically to an id (with offset) a few seconds after a page has loaded (without the user having to click on a link)?

    Thanks again

    Reply
    • James
      Posted on July 27, 2023 at 15:22 Permalink

      Hi again – I have just found your earlier reply from 2020 – so no need to reply again – unless something has changed in your latest version.

      Thanks again 🙂

      Reply
  3. mmdwc
    Posted on July 20, 2023 at 13:13 Permalink

    hello,

    is it possible to use this plugin to scroll inside a container?
    let me explain, my scrollable div(content-ajax) is inside a div (wrapper), therefore the scroll to id function doesn’t work since it’s the body element that gets animated by the script…

    #wrapper { width: 100%; height: 100vh; overflow: scroll; } #content-ajax {}

    Is there a workaround?

    thanks

    Reply
    • malihu
      Posted on July 20, 2023 at 15:17 Permalink

      Unfortunately, no. The plugin works strictly on the root element (html/body).

      Reply
  4. Shwetha
    Posted on July 15, 2023 at 07:26 Permalink

    Hi, can anyone please help me fixing the issue. I have a website https://maithrinet.healthyhomefood.com/ with the 5 menus (Home, About, Solutions, Services, Contact Us) on the header. On clicking Solutions, Services and contact Us links, the page scrolls to the particular sections on the Home page and when the page scrolls the header gets stick on the top. The problem is on menu click the complete section is not visible properly as the section hides behind the sticky header partially. How can i make the page scroll to the exact location and not hide any content behind the sticky header. I have used page scroll to id and Sticky Header Effects for Elementor plugins to achive the effects.

    Reply
    • malihu
      Posted on July 17, 2023 at 02:45 Permalink

      Hello Shwetha,

      I just checked your site. You need to utilize the offset option in plugin settings to offset the scrolling according to your sticky header. The best way to do this is to use your sticky header element selector.

      Just go to “Page scroll to id” settings and set the “Offset” option value to:

      .she-header-yes

      Click save changes and test your page links 😉

      Let me know if it works.

      Reply
      • Shwetha
        Posted on July 18, 2023 at 12:28 Permalink

        Hey Manos,

        Thanks a lot for fixing the issue.

        Reply
  5. Murali
    Posted on May 27, 2023 at 10:20 Permalink

    if am in about page here i clicked button its going to home page #section, For this #section need to add class using my custom script or ?

    Reply
    • malihu
      Posted on May 27, 2023 at 16:34 Permalink

      Please post your page URL so I can check it.

      Reply
  6. kuba
    Posted on May 25, 2023 at 18:10 Permalink

    Hi I thing im stuck a little

    Without this class

    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a .mPS2id-highlight {color: #222;
    }

    All my menu items behave like clicked links and have a color #767676;

    When i add
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a .mPS2id-highlight {color: #222;
    }

    they have #222; color no matter what.

    and my end gol is if the menu is untouch the colour shuld be #222; on mouse click and realase it should be #222; but on hover mouse i would like to hane #767676;.

    I do something wrong clearly.

    oh

    I have no idea how to force slow scroll after clicking home menu buton.
    no matter I use custom link or default menu option which is site, back to top on home is instant not floating smooth.

    Have a great day. Thank you in advance.

    Sorry for my crappy english

    Reply
    • malihu
      Posted on May 26, 2023 at 19:53 Permalink

      Hi,

      You need to exclude the :hover and optionally the .mPS2id-highlight selectors in your CSS. There’s also an error in your second selector as there seems to be a space between a and .mPS2id-highlight. So, change your CSS to:

      .navigation-top .current-menu-item > a:not(:hover), .navigation-top .current_page_item > a:not(:hover){ color: #222; }

      If you also want to have the #767676 color on the highlighted links while scrolling the page, change the CSS to:

      .navigation-top .current-menu-item > a:not(:hover):not(.mPS2id-highlight), .navigation-top .current_page_item > a:not(:hover):not(.mPS2id-highlight){ color: #222; }

      For the “Home” link, make it a custom link and set its URL to:

      https://sopot-homeyapartment.pl/#top

      Let me know if everything it works 🙂

      Reply
  7. Julie Williams
    Posted on April 29, 2023 at 17:15 Permalink

    Thank you so much for the outstanding information. It means a lot for me 🙂

    Reply
  8. Detlef Könnecker
    Posted on January 25, 2023 at 18:52 Permalink

    Hello, the following error shows up in the admin area

    Array to string conversion –> wp-includes/pluggable.php:2279 –> Plugin: page-scroll-to-id

    Is there a workaround?
    have a good day

    Reply
    • malihu
      Posted on January 29, 2023 at 03:45 Permalink

      Hello,

      This is a known issue which will be fixed in the next plugin version (1.7.8). If you don’t want to wait, you can download the development version from the link below and use it replacing the current plugin version you have:

      https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

      You can keep using the development version and update to version 1.7.8 when it becomes available, as you normally do.

      Let me know if you need more help.

      Reply

Comments pages: 1 6 7 8

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