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.


Plugin home     Project on GitHub

Pages: 1 2 3 4


566 Comments

Post a comment

Comments pages: 1 5 6 7

  1. Mark
    Posted on November 8, 2019 at 04:35 Permalink

    First and foremost thank you for this wonderful plugin.

    For the links to work for the hamburger menu links on a one-page site, I cannot use ‘#link’ but must use a full path ‘https://beatballaballa.com/beta-phase/#link’.

    But that ruins the smooth scrolling effect.

    Here’s what happens:

    The page loads ‘https://beatballaballa.com/#presse’
    then hops back to the top of the page:
    ‘https://beatballaballa.com/#’, after which it loads:
    ‘https://beatballaballa.com/#presse’

    Is there something I can do to get the instant scrolling effect back that I get with ‘#presse’.

    Thank you either way for your great plugin and help,

    Mark

    Reply
  2. haim
    Posted on October 29, 2019 at 15:53 Permalink

    Hi!
    Thanks for your amazing plugin.

    Sometimes the “Scroll from/to different pages (i.e. scroll to target when page loads)” works, and sometimes not.

    It’s hppaning in the same website:
    Working – https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D/#s8
    Not working – https://chizki.com/solutions/#s8

    I’d glad to know what should I do to fix it. I want it to work in all pages.
    Thanks!

    Reply
    • malihu
      Posted on October 29, 2019 at 18:27 Permalink

      Hello,

      On the https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D page, the s8 target element exists and that’s why it works.

      On the https://chizki.com/solutions/ page, there’s no s8 target element, so it doesn’t work.

      These are different pages, so you need to also add the s8 id on the /solutions/ page.

      Let me know

      Reply
      • Haim
        Posted on October 30, 2019 at 17:10 Permalink

        Thanks, you were right.

        But what about here?
        https://levi-david.com/%D7%94%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D-%D7%A9%D7%9C%D7%A0%D7%95/#s4

        Here all the sections have a different ID, and yet it didn’t scroll to them when loading the page

        Reply
        • malihu
          Posted on October 31, 2019 at 01:29 Permalink

          No problem.

          In the page you posted there are few elementor links with custom actions that conflict with the plugin.

          Try this:

          Go to “Page scroll to id” settings and add the following at the end of the selectors are excluded field (just copy/paste the code below including the comma and space at the beginning):

          , #elementor-action

          Save changes and test your page.

          Reply
        • malihu
          Posted on November 11, 2019 at 16:17 Permalink

          Ah sorry, I posted the wrong selector! Change it to this:

          , a[href*='#elementor-action']

          Save changes and test. Let me know if it worked 🙂

          Reply
  3. Yaroslav
    Posted on October 20, 2019 at 09:18 Permalink

    Hello Malihu!

    Thank you for developing Page scroll to 2id plugin, it’s great to use it.

    My question:

    I have installed JinvertScroll script on WordPress website for a horizontal scrolling and also installed Page scroll to 2id plugin with a “Prevent other scripts from handling plugin’s links” and “auto” orientation adjustments but now i have a problem with scrolling to my Page scroll to 2id sectors: after clicking the button the screen moves only for a very little to the right but not to the Page scroll to 2id sector that i need and adjusted. PS: when i deleted JinvertScroll script all began work as normal but the page became as a vertical but not a horizontal orientation. I read some your answers here so maybe the problem with CSS. Also i implemented your script with only mouse wheel scrolling effect but the situation was the same: screen only moved to one direction to the right but not back by mouse wheel.

    Can you give a useful advices what to do? Thank you in advance!

    Reply
    • malihu
      Posted on October 20, 2019 at 21:31 Permalink

      Hello,

      I need to see your page/site in order to help with such issues.

      That said, “Page scroll to id” does not convert a page’s template design from vertical to horizontal (and vice versa). By using the horizontal or auto layout in plugin settings, you simply instruct the plugin the direction it should scroll (but your page should already have a horizontal design/layout).

      Also, the plugin does not scroll overflowed divs. It works strictly on document’s root element (html/body).

      I’m not sure if any of the above is the issue. If you can post your page/site URL, I’ll be able to check it and help if I can.

      Reply
  4. Koru Ux Design
    Posted on September 4, 2019 at 10:17 Permalink

    This is really valuable information and very practical to get done.

    Is there any resource for the new updates as well?

    Thank you!

    Reply
  5. Stijn
    Posted on July 8, 2019 at 14:07 Permalink

    Hi,

    I’m using the scroll to id and custom scrollbar plugin. It works well, but I can’t find out how I can set the highlightClass on scroll and on click

    Reply
  6. MarkR
    Posted on June 20, 2019 at 01:51 Permalink

    I have your mCustomScrollBar and m_PageScroll2id plugins installed on a page that jumps to IDs like this:

    <a href="#bkmk11" class="web_address" style="text-decoration: none" rel"m_PageScroll2id">How does this work?</a><br>

    that jumps to IDs like this:

    <div class="h1_info" id="bkmk11"><b>How does this work</b></div><br>

    But when it gets there, the scrollbar disappears. If I try to scroll with the mouse wheel, the cursor jumps back to the top and the scrollbar reappears.

    You show a callback that will return the scrollTo.y property but that only returns the position; it doesn’t allow me to mouse from there.

    function myCustomFn2(){ console.log(mPS2id.scrollTo.y);}

    I need to update the mouse position but your code doesn’t show how to do that. I really hope you can help with this. Both plugins are great!

    I am going to credit you on my website when it goes live in two weeks. The site has a very innovative design. PLEASE HELP.

    Thanks,

    Mark

    Reply
    • malihu
      Posted on June 20, 2019 at 09:53 Permalink

      The 2 plugins are not compatible. They don’t work together as “Page scroll to id” works only with browser’s native scrollbar.

      Javascript scrollbars (like mCustomScrollBar) have their own methods for scrolling the page. You can see the method here and a related guide here.

      Reply
  7. Mark
    Posted on June 14, 2019 at 09:39 Permalink
    • malihu
      Posted on June 15, 2019 at 03:07 Permalink

      The plugin works strictly on anchor elements (i.e. links) with a valid href/URL attribute.

      The only way to do it on a div, would be via javascript, e.g. by using plugin’s scrollTo method to scroll to the target element when the div is clicked. For this you’d need to add a custom js script in your template.

      Reply
  8. Akro Web
    Posted on May 29, 2019 at 11:55 Permalink

    Navigation blocked

    Hello,
    I have several sites that use your plugin.
    I just noticed that since this morning, your plugin has been blocking my sites:
    – links/menus no longer work
    – my browser tells me: “A web page slows down your browser. What do you want to do?”

    We can no longer browse the sites and they are therefore inaccessible.
    I disabled the plugin, the problem is solved but of course the “scroll” function no longer works.

    Do you know what the problem is.

    I have the latest updates of wordpress and my plugins.

    Thank you.

    Sorry about my English, I’m French.

    Thank you.

    Reply
  9. giuse
    Posted on May 25, 2019 at 11:30 Permalink

    Hi,

    with the plugin update I got an issue

    with version 1.6.5
    link with href like http://www.xxxxxx.com/page/#id are no longer underlined, while they were with 1.6.4
    link with href like #id are still underlined, as they were with 1.6.4

    Reply
    • malihu
      Posted on May 25, 2019 at 12:10 Permalink

      This sounds like a css issue. If you post your site url, I’ll be able to check what happens and help.

      Reply
      • giuse
        Posted on May 27, 2019 at 09:01 Permalink

        Hi

        this is the page that does not work anymore with 1.6.5
        http://www.gianesing.com/it/azienda/

        Reply
        • malihu
          Posted on May 27, 2019 at 13:47 Permalink

          It seems you’re using the “Q2W3 Fixed Widget” plugin, right?
          Did you update the Q2W3 plugin too or change its settings?

          Please check the following thread and see if changing the Q2W3 plugin options mentioned, fixes the issue:

          https://wordpress.org/support/topic/conflict-with-q2w3-fixed-widget-1/

          Reply
          • giuse
            Posted on May 28, 2019 at 08:19 Permalink

            Hi,

            I have Q2W3 5.1.9, the latest available.

            The thread is about Q2W3 not working, in my case is page-scroll-to-id that does not work as expected. Any case I tried to do what suggested in thread, but it doen not work.

    • malihu
      Posted on May 27, 2019 at 19:26 Permalink

      Hello again,

      I think the issue you’re having might be related to an issue in version 1.6.5.

      I’ve pushed a fix for this issue in plugin’s development version:

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

      Please replace version 1.6.5 with the one above and check if the issue is fixed.

      Let me know

      Reply
  10. Klaus Meschir
    Posted on May 24, 2019 at 08:59 Permalink

    Hi,

    i’m test your plugin for this website, but I have a problem. When I click the link in menu once, it scrolls to the anchor but it work only at the first time. The menu-link is deactivated after clicking.
    I changed in the settings “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target2 on and off but this has no effect for my problem. I use the WPBakery Plugin.

    Thanks for your help.

    Reply
    • malihu
      Posted on May 24, 2019 at 13:24 Permalink

      Hello,

      The problem you have does not come from “Page scroll to id”. It comes from your theme’s internal function for scrolling the page. The 2 scripts that do this are:

      ...themes/suffice-pro/assets/js/smooth-scroll.min.js
      ...themes/suffice-pro/assets/js/suffice-custom.min.js

      Try this:

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

      If this doesn’t work, you’ll need to see if there’s an option in your theme settings to disable page smooth scrolling for same-page links.

      Let me know

      Reply
      • Klaus Meschir
        Posted on May 27, 2019 at 11:29 Permalink

        Hello,

        i try check “Prevent other scripts…” and deactivate the “back to top”-function in theme but the problem is the same.

        Thanks for your reply.

        Reply
        • malihu
          Posted on May 27, 2019 at 13:54 Permalink

          In plugin settings, enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test again.

          Reply
          • Klaus Meschir
            Posted on May 28, 2019 at 15:48 Permalink

            Hello,

            that’s is the Solution. After checking this option i can jump between the anchors.

            Thanks for your help.

  11. Tomas Risberg
    Posted on May 22, 2019 at 21:22 Permalink

    Hi,

    After updating to Page scroll to id version 1.6.5 it scrolls too fast, and doesn’t stop the scrolling were it should stop it.

    This page illustrates the problem:

    https://silent.se/psy/overklighet

    Click on for example [1] and you see what happens.

    Reply
    • malihu
      Posted on May 22, 2019 at 21:36 Permalink

      Hi,

      Did you installed another plugin, e.g. auto-optimize?

      Reply
      • Tomas Risberg
        Posted on May 22, 2019 at 23:19 Permalink

        Thanks for your reply. Yes, at the same time as updating Page scroll to id I updated Autoptimize, WP Rocket and WordPress.

        Reply
        • malihu
          Posted on May 23, 2019 at 02:47 Permalink

          Can you flush/clear your site cache (wp rocket)?

          Reply
          • Tomas Risberg
            Posted on May 23, 2019 at 07:46 Permalink

            I have deleted the cache of Autoptimize and flushed the cache of WP Rocket. The problem remains.

Comments pages: 1 5 6 7

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