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

Page scroll to id

Changelog

  • 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


469 Comments

Post a comment

Comments pages: 1 4 5 6

  1. Jaime
    Posted on May 18, 2017 at 14:24 Permalink

    Hi there!
    Thanks a lot for your plugin, it’s great.

    I’ve one question I’m not able to solve.
    Everything goes ok, but when I clik one page in my main menu, it refresh the page (before going to the target).

    You can have a look here.
    http://senderosdemusicas.com/home-food

    What i’m missing?
    Thanks a lot!
    πŸ™‚

    Reply
    • malihu
      Posted on May 18, 2017 at 16:33 Permalink

      Hello,

      This is happening because your web server is set to remove the trailing slash from the URL automatically. So:
      http://senderosdemusicas.com/home-food/
      becomes:
      http://senderosdemusicas.com/home-food

      Notice how the last/trialing slash (/) is missing.
      For the browser, these 2 URL are different, thus the page refreshes.

      This happens simply because you’ve set your links URL to use a trailing slash. If you remove it the problem will be fixed. For example, change “ARTISTAS” link to:
      http://senderosdemusicas.com/home-food#artistas
      i.e. remove the slash before the hash (#) and it’ll work as expected πŸ˜‰

      Reply
  2. Trktrk
    Posted on May 6, 2017 at 18:21 Permalink

    How do I instal this plugin in WordPress??
    I tried uploading it but i get an error. When uploading via FTP I cannt see it in plugin list in WordPress

    Reply
  3. Krystian Millora
    Posted on May 3, 2017 at 07:11 Permalink

    Hi, Awesome plugin

    but how can I change the color of the nav-item when I click or highlight the specific nav? I’ve used the “a._mPS2id-h.mPS2id-clicked.mPS2id-highlight” but it didn’t work for me. Thank you

    Reply
    • malihu
      Posted on May 4, 2017 at 00:36 Permalink

      Hi,

      Did you fix it? It seems to work for me now.

      Reply
  4. James
    Posted on March 27, 2017 at 18:45 Permalink

    Hi there

    I’ve said it before and I’ll say it again – your plugins are great!

    I have something that is bugging me though and I can’t see what I’m doing wrong. On the above web page there are links in the submenu to another page – the page should scroll to the offset of the ID but it doesn’t. Scrolling works within the page but not between pages. It’s as though the script is not being called.

    Can you help please?

    Thanks

    James

    Reply
    • james
      Posted on March 27, 2017 at 18:47 Permalink

      the weblink didn’t reproduce – here it is again.

      Reply
    • malihu
      Posted on March 28, 2017 at 02:22 Permalink

      Hello,

      Scrolling smoothly from/to different pages is only available on the WordPress plugin. You need to add some extra code in order to get this functionality with the simple jQuery plugin.

      You should edit your jquery.functions.js file and remove $("a[rel='m_PageScroll2id']").mPageScroll2id({ scrollSpeed: 1500, offset: 120 }); (it’ll be moved below) and add the following code at the end of the file (after the last });):

      (function($){ var _hash=location.hash || null, _validateLocHash=function(val){ try{ var $val=$(val); }catch(error){ return false; } //avoid js errors on invalid selectors return $(val).length && $("a[href*='"+val+"']").length; }; $(document).ready(function(){ if(_hash){ if(_validateLocHash(_hash)){ var href=window.location.href.replace(/#.*$/,"#"); $(window).scrollTop(0); //stop jump to hash straight away if(window.history && window.history.replaceState){ window.history.replaceState("","",href); }else{ window.location.href=href; } } } }); $(window).on("load",function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id({ scrollSpeed: 1500, offset: 120 }); //Page Scroll to id fn call if(_hash){ if(_validateLocHash(_hash)){ $(window).scrollTop(0); //jump/start from the top setTimeout(function(){ $.mPageScroll2id("scrollTo",_hash); //scroll to location hash on page load if(window.history && window.history.replaceState){ window.history.replaceState("","",_hash); }else{ window.location.hash=_hash; } },0); //optional delay } } }); })(jQuery);

      Reply
      • James
        Posted on March 28, 2017 at 12:00 Permalink

        That’s perfect – thanks!

        Since sending you the message, I did manage to get a a form of it to work in another version but only to partially.

        I’m very grateful.

        πŸ™‚

        Reply
  5. gamatire
    Posted on March 26, 2017 at 11:01 Permalink

    Thanks that was helpful

    Reply
  6. horstmith
    Posted on March 16, 2017 at 19:39 Permalink

    Hey, great plugin!

    but, how can i change the color of the font?
    i tried everything. i use WordPress with the semplice theme.

    here is the button i want to change the color of the font:
    http://maxlorenz.com/?work=63&cs=1

    thanks a lot!

    Reply
    • malihu
      Posted on March 16, 2017 at 20:19 Permalink

      Changing font color is done via CSS as with any kind of link (it doesn’t matter if the link is added or handled by “Page scroll to id”).
      You should edit your theme’s stylesheet (or custom CSS) and set the color you want. For example, to set a color for links handled by the plugin (e.g. your “SKIP” link), you can add:

      a._ps2id { color: #c0c0c0; }

      and for the hover state:

      a._ps2id:hover { color: #000; }

      Reply
  7. Josh
    Posted on March 11, 2017 at 07:05 Permalink

    Just started my own WordPress website for a portfolio and I really love this plug-in. For the twenty seventeen theme it might be helpful to be able to scroll so that the bottom of an element is aligned with the bottom of the browser window (viewport?) rather than the default which is that the top of the element aligns with the top of the window. It looks like someone already commented on this but the solution seemed to only work for elements with fixed heights, or maybe there is already a way to do it but I can’t quite figure it out. Would it be possible to have an option for the target to be at the top or bottom of the viewport?

    Reply
    • Josh
      Posted on March 11, 2017 at 07:34 Permalink

      I’m looking for something like this: https://jsfiddle.net/L56wxhqm/32/

      Reply
    • malihu
      Posted on March 11, 2017 at 21:23 Permalink

      Hi,

      I can’t really say if this functionality can be added as a plugin feature/option on a future version. I’ll need to make extensive tests and if everything goes well, I’ll add it.

      For now, you’ll need to use javascript (for elements with non-fixed height).
      You can add a script (<script>) in your theme’s template (e.g. in footer.php after wp_footer function) that’ll change the offset of a specific link/target dynamically.

      Example:

      <script>

      (function($){ $(window).on("load resize",function(){ var val="#panel2"; //set your element's id/hash fragment value $("a[href*='"+val+"']").data("ps2id-offset",function(){ return $(window).height()-$(val).height(); }); }); })(jQuery);

      </script>

      The above will make your “Tinkerbot” link scroll until the bottom of #panel2 section reaches the bottom of the viewport.

      Reply
      • Josh
        Posted on March 12, 2017 at 03:01 Permalink

        This is awesome!! Thanks so much for your quick response and help. I got it working really well with a click event on the top menu. The way I did it is probably not the most efficient way but it works for this site. Donated. Have a beer on me πŸ™‚

        Reply
        • malihu
          Posted on March 12, 2017 at 07:07 Permalink

          Good call. Looks good to me πŸ˜‰
          Thanks a lot for your donation and support!

          Reply

Comments pages: 1 4 5 6

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