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

Page scroll to id

Changelog

  • Oct 1, 2019
    • Page scroll to id version 1.6.3 release
    • Fixed issue with links having meta characters (e.g. %) in URLs.
  • May 29, 2019
    • Page scroll to id version 1.6.2 release
    • Fixed links with full url not highlighting (introduced in previous version).
    • Fixed links with non-latin characters in url not highlighting.
  • May 27, 2019
    • Page scroll to id version 1.6.1 release
    • Fixed dynamic (live) elements issue introduced in previous version. Added excludeSelectors option parameter.
  • May 1, 2019
    • Page scroll to id version 1.6.0 release
    • Fixed highlight not working in URLs with an apostrophe.
  • Oct 1, 2018
    • Page scroll to id version 1.5.9 release
    • Plugin now works with anchors inside SVG elements.
  • May 31, 2017
    • Page scroll to id version 1.5.8 release
    • Fixed a bug regarding links with URL in non-latin characters (e.g. Greek, Cyrillic etc.).
  • Feb 8, 2017
    • Page scroll to id version 1.5.7 release
    • Fixed a bug regarding ps2id-speed-VALUE class.
  • Jan 10, 2017
    • Page scroll to id version 1.5.6 release
    • Changed required jQuery version to 1.7.
    • Added appendHash option parameter.
    • Fixed non-highlighted links with relative-root href values.
    • Added link-specific scrollSpeed value via the ps2id-speed-VALUE class (with VALUE indicating animation duration in milliseconds).
    • Changed scrollSpeed, scrollEasing and scrollingEasing default values.
  • Aug 3, 2016
    • Page scroll to id version 1.5.5 release
    • Added support for jQuery version 3.
    • Added liveSelector option parameter.
  • Oct 7, 2014
    • Page scroll to id version 1.5.4 release
    • Minor code optimizations regarding jQuery selector property.
  • Sep 17, 2014
    • Page scroll to id version 1.5.3 release
    • Added highlightByNextTarget option parameter, which enables defining targets by their position.
    • Added the ability to define targets via the html data attribute: data-ps2id-target.
    • Enabled proper highlighting for dynamic elements.
  • May 19, 2014
    • Page scroll to id version 1.5.2 release
    • forceSingleHighlight option parameter highlights the first highlighted element (instead of last).
    • Extended highlight and target classes with additional ones in order to differentiate the first and last elements: mPS2id-highlight-first mPS2id-highlight-last mPS2id-target-first mPS2id-target-last.
    • Added keepHighlightUntilNext option: Keeps element highlighted until next (one element always stays highlighted).
    • Added disablePluginBelow option: Disables plugin below [width,height] screen size.
  • Jan 15, 2014
    • Page scroll to id version 1.5.1 release
    • Extended offset option to accept element selectors (as string), js/jquery objects, arrays and functions.
    • Added the ability to define link specific offsets via the html data attribute: data-ps2id-offset.
    • Changed plugin license from LGPL to MIT.
  • Jan 3, 2014
    • Page scroll to id version 1.5.0 release
    • Dropped jQuery UI dependency (jQuery UI is no longer required for the plugin to work).
    • Added scrollTo method: Scrolls the page to a given id (defined in the function parameter) programmatically.
    • Fixed the bug of non-working links to other pages. The script now checks if href values refer to the parent document, before preventing the default behavior.
    • Fixed the bug regarding selectors referencing body class not working.
    • Any link handled by the plugin with href value #top will now scroll the page to top, if no element with id top exists.
    • Added links highlighting feature. The script adds a class (default: mPS2id-highlight) automatically on links whose target elements are considered to be within the viewport.
    • Plugin adds a class (default: mPS2id-target) automatically on targets that are considered to be within the viewport.
    • Plugin adds a class (default: mPS2id-clicked) automatically on the link that has been clicked.
    • Added offset option: Offsets scroll-to position by x amount of pixels (positive or negative).
    • Added clickEvents option: Enables/disables click events for all selectors.
    • Added 2 user defined callback functions: onStart (triggers when scrolling animation begins) and onComplete (triggers when scrolling animation is completed).
    • The plugin script now fully validates href values and ids before scrolling the page.
    • Fixed varius minor bugs.
    • Code rewritten and optimized for better performance and maintenance.
  • Feb 9, 2013
    • Page scroll to id version 1.2.0 release
    • Added support for jQuery version 1.9.
  • Sep 3, 2012
    • Page scroll to id version 1.1.0 release
    • Removed the hard-coded plugin directory URL from WordPress plugin file, in order to fix errors of pointing .js files to a wrong location.
  • Jun 4, 2012
  • May 31, 2012
    • Page scroll to id version 1.0.0 release

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