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


637 Comments

Post a comment

Comments pages: 1 5 6 7 8

  1. Vaclav
    Posted on January 16, 2023 at 08:17 Permalink

    Your plugin is causing an error: ../wp-includes/pluggable.php on line 2279
    Can you please fix it? Or will you delete this post again?

    Reply
    • malihu
      Posted on January 29, 2023 at 03:44 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.

      I don’t delete posts or comments. What happens is that some comments are flagged as spam by mistake by the system.

      Let me know if you need more help.

      Reply
  2. Fayaz
    Posted on December 14, 2022 at 11:00 Permalink

    Hi, Great plugin I must admit and thanks.

    I have one issue I am using your scroll to id plugin which in section has bootstrap 4 tabs but after reaching the section your plugin removes active classes from it’s sections and bootstrap 4 tabs get hidden.

    I have found that on line 426 of your plugin you have added to remove all active classes I have commented it out and your plugin works good.

    Suggestion if you can for future check if it does not remove active class from bootstrap tabs would really appreciate it.

    Thanks

    Reply
    • Fayaz
      Posted on December 14, 2022 at 19:33 Permalink

      Found solution on line 426 kindly update the selector by excluding active from the nav, tab-content and breadcrumbs using following updated code

      $(“.”+cc).not(‘.tab-content .active, .breadcrumb .active, .nav .active’).removeClass(cc);

      hope this helps!

      Reply
  3. Jurgen
    Posted on December 21, 2021 at 13:40 Permalink

    Hello Malihu,

    Thanks for this plugin. I can scroll down to the wanted div.
    I was just wondering how I could extend this to check a checkbox when clicking on the link?
    It’s because I scroll down to show some pictures but I want to apply directly a filter by checking a checkbox. Is this possible?

    Thanks in advance.

    Regards,
    Jurgen

    Reply
    • malihu
      Posted on December 21, 2021 at 18:19 Permalink

      Hi,

      Do you use the standalone jQuery plugin or the WordPress plugin?

      You can do what you describe with some extra javascript and using plugin’s onComplete callback function.

      If I could see your site/page I’d be able to provide some code and/or an exact solution.

      Reply
  4. Yash Ganatra
    Posted on May 27, 2021 at 15:54 Permalink

    Scroll to Id not working for multiple pages

    Reply
  5. David
    Posted on May 11, 2021 at 16:49 Permalink

    It seems your plug-in does not work on a fresh installation of WordPress in Multisite/MultiDomain mode.
    Activating causes error (blank page with alert).

    I use the plug-in on another site with a standard install and it works as expected.

    Any Idea?

    Reply
  6. Luke
    Posted on October 27, 2020 at 13:53 Permalink

    Hello,

    I just wanted to let you know, that your Plugin is not compatible with the newest version of the DIVI Theme. The Frontend Divi Builder is not loading when the plugin is active. Since Divi is quite popular I thought this would be interesting to you.

    Thanks for this plugin!

    greetings from Munich

    Reply
    • malihu
      Posted on October 27, 2020 at 18:57 Permalink

      Hello,

      Can you please post the “Selector(s)” option value you have in plugin settings?

      Also, does plugin version 1.6.8 work (as opposed to the latest 1.6.9)?

      Thanks!

      Reply
    • malihu
      Posted on October 28, 2020 at 14:27 Permalink

      I can confirm that the latest WordPress (5.5.1), latest DIVI theme (4.6.6) and “Page scroll to id” plugin (1.6.9) all work as expected.

      Please check in “Page scroll to id” settings and set the “Selector(s)” option value to:

      a[href*='#']:not([href='#'])

      Normally, you should also see a warning under the “Selector(s)” option.

      Save changes and test. Let me know.

      Reply
  7. Rafał
    Posted on October 1, 2020 at 16:36 Permalink

    I am using the jquery version of the plugin and I have a problem with the animation after loading the page when the link comes from another subpage. I do not know how to enable the option so that when I click on the menu link, it will switch me to another subpage and scroll me nicely after loading.

    My code:

    (function($){ $(window).on("load",function(){ /* Page Scroll to id fn call */ $(".subpage__nav a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:".subpage__nav a", highlightClass:"active", scrollEasing: "easeInOutExpo", offset: 40 }); }); })(jQuery);

    Someone help?

    Reply
    • malihu
      Posted on October 5, 2020 at 17:53 Permalink

      The jQuery plugin does not support this feature out-of-the-box (e.g. via option). You’ll need to add the following script in your page(s), after jquery.malihu.PageScroll2id.js inclusion:

      <script> (function($){ //scroll to hash on page load _hash=location.hash || null; $(function(){ var href=window.location.href.replace(/#.*$/,"#"); $(window).scrollTop(0); if(window.history && window.history.replaceState){ window.history.replaceState("","",href); }else{ window.location.href=href; } }); $(window).on("load",function(){ $(window).scrollTop(0); var scrollToHashUseElementData=true, linkMatchesHash=$("a._mPS2id-h[href$='"+_hash+"'][data-ps2id-offset]:not([data-ps2id-offset=''])").last(); setTimeout(function(){ if(scrollToHashUseElementData==="true" && linkMatchesHash.length){ linkMatchesHash.trigger("click.mPS2id"); }else{ $.mPageScroll2id("scrollTo",_hash); } if(window.location.href.indexOf("#")!==-1){ if(window.history && window.history.replaceState){ window.history.replaceState("","",_hash); }else{ window.location.hash=_hash; } } },60); }); //----- })(jQuery); </script>

      Reply
      • Rafał
        Posted on October 6, 2020 at 19:12 Permalink

        Thank you! This work 🙂

        Reply
  8. Fábio Novais
    Posted on August 5, 2020 at 00:59 Permalink

    Hi there!
    Is there a way to change the target scrollable element? I mean, the default element is body or document, I´m not sure. What if I need to set some different elemento do watch for scroll event?

    Reply
  9. Shahzad
    Posted on June 16, 2020 at 20:00 Permalink

    Hi,
    Hope you are doing good. Can you please let me know how you have created/used plugin for the menu you have used in the demo? That section1, section2.. demo. I love that menu and wana use it in the middle of my page before some sections but unable to find how to make exact same menu/buttons. Can you help please? otherwise no issues at all 🙂

    Reply
  10. S
    Posted on May 11, 2020 at 12:11 Permalink

    I would like to ask a question, when I click on a link in the navigation, and then scroll the page, and the link just clicked has a class “mPS2id-clicked” that has not been removed, how can I fix this bug?

    Reply
    • malihu
      Posted on May 11, 2020 at 19:01 Permalink

      Hi,

      This is not a bug, it’s a feature. The last clicked link gets the class mPS2id-clicked, all links within the viewport get the class mPS2id-highlight etc. Why would you want to remove it?

      Reply
  11. ddinhaha
    Posted on May 4, 2020 at 12:52 Permalink

    Thank you!

    Reply
  12. Jibran
    Posted on May 3, 2020 at 23:03 Permalink

    So, I implemented this with WP Bakery Page Builder

    But it’s working on the tabs as well, even when I used your selectors mentioned in the article. http://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/

    To view this issue:

    Head over to nonfig.com and click on SIMPLE TO USE
    Head over to https://www.keydesign-themes.com/intact/digital-product/ and click on ADVANCED STATISTICS

    You will notice the behavior.

    let me know how to solve this.

    Reply
    • malihu
      Posted on May 4, 2020 at 01:34 Permalink

      Hello,

      I checked your pages and “Page scroll to id” plugin is not activated/used. Let me know when you activate it.

      Reply
      • Jibran
        Posted on May 5, 2020 at 02:53 Permalink

        Yeah, I had to deactivate it because of the above-mentioned issue.
        Please check now.

        Reply
        • malihu
          Posted on May 5, 2020 at 14:48 Permalink

          Go to “Page scroll to id” settings and add:

          , .tab > a

          at the end of the “selectors are excluded” field. Just copy the value above and paste it at the end, right after a.screen-reader-text.skip-link

          Click save changes, test your page and let me know

          Reply
  13. ainatte
    Posted on May 2, 2020 at 18:17 Permalink

    Hi,
    I’m a beginner trying to use your plugin with elementor on page load. I inserted an html code in a section at the top of the page with this code: <script> jQuery(window).on("load",function(){ jQuery.mPageScroll2id("scrollTo","#productbox"); </script>

    I have an anchor labeled “productbox”
    i was hoping the page would scroll onload.
    any idea what I’m doing wrong?

    Thanks!
    Ainatte

    Reply
    • malihu
      Posted on May 3, 2020 at 10:46 Permalink

      Hello,

      It depends where you placed the code. In WordPress, you should place the code in your theme/child-theme footer.php, just before the closing body tag (</body>).

      Also, the code you posted doesn’t seem correct(?) Change the code to:

      <script> (function($){ $(window).on("load",function(){ $.mPageScroll2id("scrollTo","#productbox"); }); })(jQuery); </script>

      Let me know if it works

      Reply
  14. Gerhard
    Posted on April 29, 2020 at 09:39 Permalink

    Great Plugin, it worked really well until a couple of days ago. Meanwhile I get the following meassage in my WB theme when your plugin is activated.

    Deprecated: contextual_help is deprecated since version 3.3.0! Use get_current_screen()->add_help_tab(), get_current_screen()->remove_help_tab() instead. in /var/www/myeloma-registry.com/wp-includes/functions.php on line 5088

    Could you please give me some advice how I can handle this error message.
    Best regards
    Gerhard

    Reply
    • malihu
      Posted on April 29, 2020 at 22:20 Permalink

      Hi,

      This message is a simple notice. It’s not an error and it does not affect plugin’s functionality or performance in any way (you see this message because you have enabled debug constant in wp-config.php).

      This said, the deprecated message will be fixed in plugin’s next version (you can get it now in plugin’s development if you want).

      The message appears on admin pages (not on the frontend), right?

      When you say “it worked really well until a couple of days ago” you mean it doesn’t work now or you’re just talking about the backend message?

      Reply
  15. James
    Posted on April 28, 2020 at 20:46 Permalink

    Hi there Manos

    Thanks again for answering my last queries – really helpful.

    I was wondering if it is possible somehow to use the highlight option on a link to another page rather than an intrapage link?

    I have a fixed ul in the sidebar of a page -the page contains a number of thumbnail illustrations. What I would like is for the relevant li to highlight as its corresponding illustration scrolls into view. But as I say, the link in the list is to another page, not to the illustration.

    I hope that makes sense and thanks for your help.

    James

    Reply
    • malihu
      Posted on April 29, 2020 at 22:13 Permalink

      I can’t really say unless I see your page. If your thumbnails are actual links maybe but I have no idea without seeing your page and code.

      Reply
    • malihu
      Posted on April 30, 2020 at 02:09 Permalink

      I see. No, you can’t really do this.

      You’d need to develop a completely custom script for such behavior.

      Reply
      • James
        Posted on April 30, 2020 at 14:19 Permalink

        Ok – I thought that might be the case – but I really appreciate you taking a look – thank you.

        All best wishes,

        James

        Reply
  16. James
    Posted on April 2, 2020 at 15:51 Permalink

    Is it possible for the page to auto-scroll to an id a few seconds after page load?

    Reply
    • malihu
      Posted on April 3, 2020 at 09:31 Permalink

      You’ll need to add a custom js script in your page that will use plugin’s scrollTo method.

      For example:

      <script> (function($){ $(window).on("load",function(){ setTimeout(function(){ $.mPageScroll2id("scrollTo","#your-id"); }, 4000); }); })(jQuery); </script>

      Reply
      • James
        Posted on April 3, 2020 at 15:33 Permalink

        Thanks – that works great. How can I incorporate an offset into that?

        Reply
        • malihu
          Posted on April 4, 2020 at 08:50 Permalink

          See plugin method on the link I posted above. You use the offset option parameter:

          <script> (function($){ $(window).on("load",function(){ setTimeout(function(){ $.mPageScroll2id("scrollTo","#your-id",{ offset: 100 }); }, 4000); }); })(jQuery); </script>

          Reply
          • James
            Posted on April 6, 2020 at 10:55 Permalink

            Thank you – I should have worked that out. 🙂

          • James
            Posted on February 12, 2024 at 17:06 Permalink

            Is there a way to prevent the autoscroll happening if the user has already begun to scroll the page? I have other scrollto links to IDs in the page so I don’t want to simply ‘destroy’ it.
            Thanks.

        • malihu
          Posted on February 13, 2024 at 00:54 Permalink

          You can do this with some extra js code:

          <script> (function($){ $(window).on("load",function(){ $("a[href*='#']:not([href='#'])").on("click",function(e){ if($("html,body").is(":animated")) return false; }); }); })(jQuery); </script>

          Let me know if this is what you need.

          Reply
          • James
            Posted on March 5, 2024 at 19:19 Permalink

            This didn’t work for me – unless I am not implementing it properly. I have the page set up to auto-scroll to an id with an offset a few seconds after the page loads. The problem is that if the user has already scrolled manually before the auto scroll fires, the script returns the page to the offset ID point to the id offset point – which is annoying for the user. I need a way to stop that happening please.
            Many thanks,
            James

        • malihu
          Posted on March 6, 2024 at 01:07 Permalink

          Oh I see. I didn’t understand exactly what you wanted. Change your code to:

          <script> (function($){ $(window).on("load",function(){ setTimeout(function(){ if(!$(window).scrollTop()){ $.mPageScroll2id("scrollTo","#your-id",{ offset: 100 }); } }, 4000); }); })(jQuery); </script>

          Let me know 🙂

          Reply
  17. Dietmar Heiser
    Posted on April 1, 2020 at 02:06 Permalink

    i’m using your wonderful plugin since 2016. Recently I saw, that the plugin isn’t working anymore on my site. I can’t say for how long. It’s the newest version running on WordPress 5.2.4.
    Its a german website. You have to follow these menus items to get there. “Angebot” then “Preise”. Now you see the menu on the right.
    Regardless which item you click the page will scroll to the top instead to the id.

    Reply
    • malihu
      Posted on April 1, 2020 at 10:47 Permalink

      Hello,

      Your HTML code has the following error:

      It has a js script (as well as 2 empty lines) before the <!doctype html> tag. I don’t know why or how this script got in your template but it’s invalid.

      If you remove it, everything will work. Let me know 🙂

      Reply
      • Dietmar Heiser
        Posted on April 1, 2020 at 18:56 Permalink

        Thank you very much!
        That code was incorrect. It should force a iframe to reload, but indeed it’s faulty.

        Thanks!

        Reply
  18. Zoran
    Posted on March 23, 2020 at 01:25 Permalink

    Hello,
    I wanted to ask, if there is some trick when visiting page from url demo-all-options.html#section-7 to have smooth scrool till section-7 rather then goes direct there without any anumation?

    Thanks in advance. All best.

    Reply
    • malihu
      Posted on March 23, 2020 at 02:51 Permalink

      Hello,

      Can you elaborate a bit more on what you need? Can you give an example?

      Reply
  19. Danny
    Posted on February 7, 2020 at 15:26 Permalink

    Hello, i have a question about callbacks, could You provide me an example of adding class to body when for example second section is loaded/active ?
    How can i target specific section ?

    I suppose it should be something like this:
    onComplete:function(){ if(mPS2id.target === 1){ $("body").addClass('test'); } }

    Thank you very much in advance.

    Reply
    • Danny
      Posted on February 7, 2020 at 15:46 Permalink

      What im trying to achieve is that body class is changing with sections, so when section is active body class will have class name same as id of active section.

      Reply
    • malihu
      Posted on February 7, 2020 at 23:34 Permalink

      Something like this should work:

      onComplete:function(){ var currentID = mPS2id.target.attr("id"), //get current section id classToAdd, //class(es) to add variable classToRemove; //class(es) to remove variable //set the class according to current section id switch(currentID) { //change "my-id-1", "my-id-2" etc. to your section classes case "my-id-1": //if current section id is my-id-1 classToAdd = "my-id-1"; //then add the class my-id-1 to the body classToRemove = "my-id-2 my-id-3 my-id-4"; //and remove the other non-current sections classes break; case "my-id-2": classToAdd = "my-id-2"; classToRemove = "my-id-1 my-id-3 my-id-4"; break; case "my-id-3": classToAdd = "my-id-3"; classToRemove = "my-id-1 my-id-2 my-id-4"; break; case "my-id-4": classToAdd = "my-id-4"; classToRemove = "my-id-1 my-id-2 my-id-3"; break; } //add/remove class(es) to body $("body").removeClass(classToRemove).addClass(classToAdd); }

      Let me know if it helps

      EDIT: Added the missing break

      Reply
      • Danny
        Posted on February 10, 2020 at 14:26 Permalink

        I’ve added break’s to other cases and it works like a charm.

        Thank You for Your help.

        Reply
        • malihu
          Posted on February 13, 2020 at 22:03 Permalink

          Ah yes, I missed this!

          Reply
  20. 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
  21. 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
          • Haim
            Posted on December 2, 2019 at 17:13 Permalink

            Thanks! You’re great.

            now it’s opening the page at the right section, but it’s not scrolling down to it.
            I’d love to get a fix for it, but it’s not urgent, take your time.

            Thanks again!

    • malihu
      Posted on December 9, 2019 at 14:38 Permalink

      You have an error in the selectors are excluded field. There are 2 commas there. Change the value at the end from:

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

      to:

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

      Reply
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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.

  30. 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 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