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


638 Comments

Post a comment

Comments pages: 1 3 4 5 6 7 8

  1. Péter
    Posted on March 8, 2017 at 16:11 Permalink

    Hi,

    I also have a problem with the highlighting thing like many other guys.

    I’m new to WP and I’ve just started to create a new site for our small family business. I use Maskitto Light theme with Pagebuilder because of the visual page-editing.

    On the main menu I’ve created 2 custom links (About us; What we do), and I’ve also created 2 other “classic” menu items (Our products and Contact us).

    I use full links for the custim links because I want t reach them from the two classic menu items, too. The problem is that they are highlighted all the time when I’m on my starting page. I’ve tried to mark the “Allow only one highlighted element at a time” option but had no succes. I think it’s beacuse of the default theme…

    Could You help me? (Sorry for my bad English)

    Reply
    • malihu
      Posted on March 8, 2017 at 17:38 Permalink

      Hello,

      You don’t need the “Allow only one highlighted element at a time” option. The menu items are probably highlighted by your theme (like you said). If you didn’t use any of the plugin’s highlight classes in your CSS, then the highlighting you see comes from your theme’s stylesheet.

      Please take a look at this FAQ and let me know if you need more help.

      Also note that if you need help with overwriting your theme’s CSS I’d need to see your page/site.

      PS. Your English is very good 🙂

      Reply
  2. Nikita
    Posted on March 6, 2017 at 12:52 Permalink

    hi malihu,

    i’m trying to change the color of my buttons on my one page, when they are active/clicked. my html and css looks as follows – maybe you have an idea why it is not working… 😀

    <div class="fixed-nav-wrap"> <div class="container"> <ul class="fixed-nav"> <li><a id="button" href="#inhalt" rel="m_PageScroll2id">Inhalt</a></li> <li><a id="button" href="#inhalt1" rel="m_PageScroll2id">Inhalt1</a></li> <li><a id="button" href="#inhalt2" rel="m_PageScroll2id">Inhalt2</a></li> </ul> </div> </div> #button1 { background-color: white; border: 2px solid #f35175; font-size: 14px; } #button1:active { background-color: red; }

    Reply
    • malihu
      Posted on March 6, 2017 at 15:13 Permalink

      Hello,

      In your CSS you style the element #button1 but you don’t have a link with id button1 in your HTML (all your buttons have id button).

      In addition, id attributes should be unique. It’s not correct to have the same id on more than one elements on the same page (you can use a class for that if you want).

      So you should either add unique ids to your links and style each one of them:

      <li><a id="button1" href="#inhalt" rel="m_PageScroll2id">Inhalt</a></li> <li><a id="button2" href="#inhalt1" rel="m_PageScroll2id">Inhalt1</a></li> <li><a id="button3" href="#inhalt2" rel="m_PageScroll2id">Inhalt2</a></li>

      #button1, #button2, #button3 { background-color: white; border: 2px solid #f35175; font-size: 14px; } #button1:active, #button2:active, #button3:active { background-color: red; }

      or you can use another selector which is shared among the links. For example, all the links have m_PageScroll2id rel attribute value, so you can simply do:

      .fixed-nav a[rel='m_PageScroll2id'] { background-color: white; border: 2px solid #f35175; font-size: 14px; } .fixed-nav a[rel='m_PageScroll2id']:active { background-color: red; }

      In any case, you should set unique ids on your links (e.g. #button1, #button2 etc.) or remove the id attribute completely.

      Reply
  3. Punit Shukla
    Posted on February 26, 2017 at 09:45 Permalink

    I am having issue while validating my website with W3C validation as it says that
    Bad value m_PageScroll2id for attribute rel on element a: The string m_PageScroll2id is not a registered keyword.

    Please help.

    Reply
    • malihu
      Posted on February 26, 2017 at 09:54 Permalink

      The rel attribute is just one way to enable the plugin on links. You can use other attributes like class.

      If you use the plugin in WordPress, you can use the class ps2id on your links (instead of the rel attribute).

      If you use the plugin manually, you can simply do:

      $("a.ps2id").mPageScroll2id();

      and create links with ps2id class.

      Reply
  4. Red Abrugar
    Posted on February 21, 2017 at 06:26 Permalink

    Hi, I’ve installed the plugin to my wordpress website and it works great, however upon scrolling, the links are highlighted when it’s in viewport, which results to a multiple highlighted links. I’ve already used the -first or -last but still the same.

    What i want to do now is to only highlight the current menu link when the target reaches the sticky header or navigation menu. Is there a way that i can do that?

    Hope you could help me this. Thank you.

    Reply
    • malihu
      Posted on February 21, 2017 at 11:47 Permalink

      Hello,

      Try to disable “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target” options.

      After disabling those, change your CSS to:

      .genesis-nav-menu a.mPS2id-highlight-first { background-color: #4484c5; color: #fff; }

      Then, if you still need to have one link highlighted at all times, re-enable “Keep the current element highlighted until the next one comes into view”.

      Hope this helps

      Reply
  5. david
    Posted on January 29, 2017 at 19:23 Permalink

    Do you have a tutorial on how to use this for someone that is new to wordpress? I really have no clue where to start.

    I wish to do a one page website with a page scroll like this:

    http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo-dynamic-content.html

    I try to follow your HOW TO but I get lost in the first step 🙁

    Reply
  6. Bojan
    Posted on January 14, 2017 at 19:11 Permalink

    Hi Malihu,

    Just wanted to say Thank you! Great plugin you’ve developed here, with great configuration options, simply brilliant!

    Reply
    • malihu
      Posted on January 14, 2017 at 21:18 Permalink

      Thank you 🙂

      Reply
  7. Lolo Ogly
    Posted on January 14, 2017 at 07:29 Permalink

    Hello! I’m using Material Design Lite framework from google but your plugin doesn’t work on it. Can you explain how to switch the BODY scrolling selector to another one (inner div container)? It’s possible without modifying core js? Thanks in advance. Love your plugin and used it on my previous project.

    Reply
    • malihu
      Posted on January 14, 2017 at 11:24 Permalink

      Hi,

      At least for now, the plugin works only on the page root element (html/body). It will not work on inner overflowed divs so you won’t be able to use it in such layouts.

      Reply
  8. Jonathon
    Posted on January 11, 2017 at 22:01 Permalink

    Hello! I’m currently developing a website and am trying to use your code to create the scrolling effect. I am only using it on my homepage for now. It is a wordpress installation, but I’m using the manual inclusion instead of the wordpress plugin.

    Currently it’s working perfectly…in Firefox. When I test in Chrome or Safari nothing happens. Has this happened before? Am I missing some piece of code to make it work for all browsers?

    Thanks in advance!

    Reply
    • malihu
      Posted on January 11, 2017 at 23:57 Permalink

      Oh you found a bug!
      I’ll update the script asap but in the meantime simply move plugin scripts (jquery.malihu.PageScroll2id.min.js and function call script) from the head tag to the body (at the bottom, right before the closing body tag) – no need, see comment below.

      Let me know 🙂

      Reply
    • malihu
      Posted on January 12, 2017 at 00:26 Permalink

      I’ve fixed and updated latest version (1.5.6). Please re-download the plugin and just replace the script (no need to change anything else). Let me know if everything is ok.

      Reply
      • Jonathon
        Posted on January 12, 2017 at 16:20 Permalink

        Thank you so much for the quick response! Yes, everything is working now. Thanks again!

        Reply
  9. Mátyás
    Posted on January 3, 2017 at 01:07 Permalink

    Thank you very much for this article!
    It helped me a lot!

    Reply
  10. Tino
    Posted on December 26, 2016 at 18:42 Permalink

    hey, I really love your plugin and I think it’s brilliant for linking inside posts. And I can’t help but seeing we can only use scroll to text once. After I clicked it and was moved to the linked part, I couldn’t use the scroll to text again. Is this normal or is there any way to refresh it. Thank you.

    Reply
    • malihu
      Posted on December 26, 2016 at 20:38 Permalink

      This should not happen. If you can post your link I’d be happy to investigate and assist if I can.

      Reply
  11. Alvin
    Posted on December 9, 2016 at 13:03 Permalink

    Hi there,

    This maybe somewhere in the comments, but I rather ask: is there a way to add the code to a button created with a WordPress theme shortcode?

    Regards,

    Alvin

    Reply
    • malihu
      Posted on December 9, 2016 at 14:02 Permalink

      There are no global or standard shortcode attributes, so it depends on the shortcode.
      For example, if your theme shortcode allows adding a class, you can use the ps2id class-name.

      If the shortcode does not provide such attribute, you can always add your element’s selector in plugin’s “Selector(s)” setting.

      Reply
  12. LuisFTV
    Posted on November 25, 2016 at 14:28 Permalink

    Hello malihu,

    Please help…

    I don’t know JQuery or CSS or HTML… but I manage to use your scrollbar plugin successfully. However, I cannot make it work with another code, one about a back-to-top button. It’s either one or the other, but not both codes. In other words, if only your code is present in the page, it works… and if only the back-to-top code is present, then it works… but neither will work if both codes are present on the page.

    I would like to have your awesome scrollbar on my page, but also I would like to have a “back-to-top” button at the bottom of the page.

    Here is the code I’ve struggling with:

    <!DOCTYPE html> <link rel="stylesheet" href="back-to-top-styles.css"/> <link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="jquery.mCustomScrollbar.css"/> <script src="jquery.min.js"></script> <script src="jquery.mCustomScrollbar.concat.min.js"></script> <style> html, body { max-height: 100vh; min-height: 100vh; overflow: hidden; min-width: 0; } </style> <script> (function($){ $(window).load(function(){ $.mCustomScrollbar.defaults.theme="3d-dark"; $.mCustomScrollbar.defaults.scrollButtons.enable=true; $("body").mCustomScrollbar({ axis:"yx", scrollbarPosition:"outside" }); }); })(jQuery); </script> </head> <body class="full-page full-page-alt"> <div class="footerContainerWrapper"> <div class="footerContainer"> <div class="padding"> </div> </div> </div> <script type="text/javascript"> // create the back to top button $('body').prepend('<a href="#" class="back-to-top">Back to Top</a>'); var amountScrolled = 300; $(window).scroll(function() { if ( $(window).scrollTop() > amountScrolled ) {$('a.back-to-top').fadeIn('slow');} else {$('a.back-to-top').fadeOut('slow');} }); $('a.back-to-top, a.simple-back-to-top').click(function() { $('html, body').animate({scrollTop: 0}, 700); return false; }); </script> </body> </html>

    I hope you could help me solved this. Thanks a million in advanced.

    Reply
    • malihu
      Posted on November 27, 2016 at 20:14 Permalink

      “Pages scroll to id” works only with browser’s native/default scrollbar.

      The custom scrollbar you’re using has its own set of functions for doing the same thing(s). You need to use plugin’s scrollTo method in your click event:

      $('a.back-to-top, a.simple-back-to-top').click(function(){ $('body').mCustomScrollbar('scrollTo','top',{scrollInertia:700}); return false; });

      Reply
  13. Ty Stewart
    Posted on October 11, 2016 at 16:57 Permalink

    Hi Malihu, this plugin is exactly what I have been looking for!

    I would also like to use a scroll to top plugin but I’m worried it could have conflicts. Do you think it will be OK? I have installed both and initial testing seems to work but I know sometimes conflicts don’t show themselves right away.

    The one I have installed for scroll to top of page is https://wordpress.org/plugins/smooth-scroll-up/

    Reply
    • malihu
      Posted on October 12, 2016 at 00:38 Permalink

      Hello,

      You shouldn’t have any issues with both plugins running 🙂

      Page scroll to id handles only the links that is instructed to handle and does not mess with other elements. From what I’ve seen, Smooth Scroll Up is simple enough so it shouldn’t cause any issue (I would be really surprised if it did).

      Reply
  14. [email protected]
    Posted on October 7, 2016 at 02:22 Permalink

    Hi,
    Thanks for making this plug in and giving such thorough support! I’m designing/building a site that has an accordion built into the theme. I’ve got most of the content within the accordion panels.

    I’ve got your plug in set up and working on the top menu – what I would like to do is when the menu item is clicked on – to have the scroll go down to the section and open the appropriate panel.

    The theme support folks have given me the code to use, but I haven’t been able to figure out how to configure it to work with your plug in. Any help would be appreciated. Here’s the code I’ve been given to work with:

    jQuery('#panels .ttfmp-accordion-container').accordion('option', 'active', 1);

    I’ve got the site password protected, the password is “fellowships”

    thanks so much!
    Krisztina.

    Reply
    • malihu
      Posted on October 8, 2016 at 01:48 Permalink

      Hello Krisztina,

      Sure I can help 🙂

      You have a script at the bottom of your HTML (the last one with the mPageScroll2id and other functions). It’s not working because your code is not wrapped in jQuery and it’s not executed properly (e.g. on page load).

      What you tried to do is actually correct (good thinking!) and if you wrap your code like below it will work:

      (function($){ //self-executing anonymous function with jQuery as argument $(window).on("load",function(){ //execute code after page is loaded //your code here... }); })(jQuery);

      But you don’t need to write any code yourself. Try replacing your script code with the following and it should do what you need:

      (function($){ $(window).on("load",function(){ $(document).data("mPS2id").onComplete=function(){ var href=$(".mPS2id-clicked").attr("href"),active; //set as many conditions as you like (link URL -> active accordion index/id) switch(href){ case "#fellowships": active=0; break; case "#eligibility": active=1; break; case "#apply": active=2; break; case "#sponsors": active=3; break; } $("#panels .ttfmp-accordion-container").accordion("option","active",active); }; }); })(jQuery);

      You can add/remove as many cases/conditions as you like (inside the js switch function). I could make it work automatically (e.g. without conditions) but it’s better for you to have more control and set the exact link-accordion panel combination you want.

      The switch statement roughly means:
      If the clicked link has URL/href “#fellowships” activate accordion 0
      If the clicked link has URL/href “#eligibility” activate accordion 1
      and so on…

      You accordion panels start from 0 (zero), so the first panel is 0, the second one is 1, the third is 2 etc.

      Reply
      • [email protected]
        Posted on October 12, 2016 at 19:57 Permalink

        You’re amazing!

        Thank you so much – this works perfectly. I’m going to make a donation as I was ready to pay someone to make this work for me.

        Thanks so much!
        Krisztina.

        Reply
        • malihu
          Posted on October 13, 2016 at 00:19 Permalink

          Glad I helped 🙂
          Thanks a lot for your donation!

          Reply
  15. vamshi
    Posted on September 25, 2016 at 00:05 Permalink

    Page dose’t scroll down, it jumps any suggestions?

    Reply
    • Casey
      Posted on September 29, 2016 at 11:43 Permalink

      Hi, don’t know if this will help you, but I have had a similar issue and fixed it.

      The problem was with my id’s. If you include multiple words with a space between them it causes a jump. If you are using multiple words in an id for example: #my best friend-id then you need to change it to #mybestfriend_id and it will scroll.

      In any case it would be helpful to include your website URL for the plugin author to have a look.

      Reply
    • malihu
      Posted on September 29, 2016 at 14:30 Permalink

      I need more info or to see your site/page in order to provide any help.

      Reply
  16. Ghenadii
    Posted on September 3, 2016 at 09:21 Permalink

    Hi malihu!

    Thank you for the awesome plugin!

    I have a question, which is of interest to many web programmers.

    How does Your plug-in when section, have a small height – say 100px !?
    Please show me a working example of how highlight sections in the menu when you scroll the page.
    Is it possible to highlight only one menu, not several at once.

    Например:https://github.com/malihu/page-scroll-to-id/blob/master/examples/demo.html
    Remove and set the height of the section #content section {min-height:100px;}

    I think many it will be very interesting

    Thank you

    Reply
    • malihu
      Posted on September 6, 2016 at 09:36 Permalink

      Hi,

      See FAQ

      Check plugin options like forceSingleHighlight. You can use the plugin options (in WordPress plugin too) to highlight your links however you want.

      Alternatively, instead of using the class .mPS2id-highlight you could use the classes .mPS2id-highlight-first or .mPS2id-highlight-last in your CSS.

      Reply
  17. Pernilla
    Posted on August 24, 2016 at 11:46 Permalink

    I can not make the offset work on IE.

    I have put this code in my css and it works fine on Firefox, Safari and Chrome (not for IE and Opera):
    #special, #memo, #tema, #online {display: block; content: " "; margin-top: -175px; height: 175px; visibility: hidden;}

    Reply
    • malihu
      Posted on August 29, 2016 at 21:12 Permalink

      I’m not sure what’s not working and if/how this issue is related to the plugin(?)

      Reply
  18. Ivan
    Posted on August 22, 2016 at 20:05 Permalink

    Thank you malihu for a great plugin, really helpful! By the way, how do the menu item highlight when I press the link the to target?

    Reply
    • malihu
      Posted on August 29, 2016 at 21:09 Permalink

      Thanks for your comments 🙂

      I’m not sure what you need but to set the highlight styling of your links, use the .mPS2id-highlight and/or .mPS2id-clicked classes in your CSS accordingly, e.g.

      a.mPS2id-highlight{ /* your style */ }

      Reply
  19. Peter
    Posted on August 21, 2016 at 10:13 Permalink

    Not sure when this started to behave. But in mobile the page doesn´t work with your plug. Is it me or is it something with the code in the plug?

    Thanks för a great plug

    Reply
    • malihu
      Posted on August 29, 2016 at 21:03 Permalink

      It depends on your site layout, markup and options. If you can send me your link I’d be able to help.

      Reply
      • Peter
        Posted on September 6, 2016 at 14:59 Permalink

        I thought I did. But here it is again..
        http://hudohalsa.com/behandlingar/

        Reply
        • malihu
          Posted on September 6, 2016 at 17:46 Permalink

          Yes sorry I missed your link on your name.

          I checked your page. When you say “the page doesn’t work” you mean the sub-menu is not opening? If yes, this has nothing to do with the plugin. It has to do with the link being the home URL, so when it’s touched/clicked, it loads the homepage.

          I checked the mobile layout with Chrome device toolbar and the plugin scrolls the page as expected.

          Reply
          • Peter
            Posted on September 6, 2016 at 19:58 Permalink

            But if you look inside an actual mobile it doesn’t work. The page scrolls automatically hysterical..

        • malihu
          Posted on September 7, 2016 at 10:50 Permalink

          I’m not sure how this is related to the plugin itself. What happens when you deactivate ‘Page scroll to id’?

          Reply
          • Peter
            Posted on September 7, 2016 at 18:54 Permalink

            Hm.. strange, the plug works without it being ativated. And the nobile behvaes as it does now? And i have cleared the cache..

        • malihu
          Posted on September 8, 2016 at 16:52 Permalink

          Well the plugin seems it’s still activated on the front-end as I can see all its functionality and included files in the document. There must be some cache setting(?)

          Reply
  20. Sharanya
    Posted on August 13, 2016 at 02:25 Permalink

    Hi malihu,

    Thanks for the awesome plugin . I just have a small question.
    When I click on the link the URL of the website changes .

    Suppose I click on the link

    [ps2id url=’#day1′ offset=”]test[/ps2id]

    The URL of my webiste changes to http://www.teamdinnerlicious.com/#day1

    Is there any way to achieve page jump without the URL change?

    Thanks

    Reply
    • malihu
      Posted on August 18, 2016 at 16:06 Permalink

      Hello,

      This should not happen. Are you sure you have the target element with the id day1 in your page (maybe you accidentally added the hash in the id)?

      Reply
  21. Ryan
    Posted on June 16, 2016 at 23:47 Permalink

    I’m using the plugin to scroll through posts on a single page with the links going to #post-id. I have the post titles in the left column of the page and all of the posts in the right column.
    It works when you first click a post title (not accurately), but once you click one link none of the others work.

    I’m also using it in my nav bar to scroll to a homepage section and that works perfectly so I must be doing something wrong…?

    Reply
    • malihu
      Posted on June 17, 2016 at 00:11 Permalink

      It’s not really possible to help unless I see your page/code. Can you send me your link?

      Reply
  22. Michal
    Posted on June 9, 2016 at 16:48 Permalink

    Fantastic plugin, thank you for devoting your time to building it! Just a quick question – by default the plugin detects change of section and updates link in navigation when the section hits the middle of the viewport. Is there any way of changing it to the bottom of the viewport so that links get updated as soon as a section enters the viewport?

    Thanks

    Reply
    • malihu
      Posted on June 10, 2016 at 16:21 Permalink

      Hello,

      Not sure if you’re using plugin’s WordPress version or not(?)
      You could use plugin’s target_ parameters to manually set the highlight position of each target element – more info.

      For example, you could create a js function that calculates the position and length of each target and set the target_ parameter dynamically. This of course depends on how your sections are set but the following function should normally work.

      Non-WordPress example

      (function($){ $(window).load(function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); // Page Scroll to id fn call _setHighlight(); // set custom highlight positions on page load }).resize(function(){ _setHighlight(); // set custom highlight positions on browser resize }); // custom highlight positions function function _setHighlight(){ $("._mPS2id-t").each(function(i){ var $this=$(this), wh=$(window).height(), targetTop=$this.offset().top; $(document).data("mPS2id")["target_"+(i+1)]={ from:-(targetTop-wh), to:-(targetTop+$this.outerHeight()-wh-1) }; }); } })(jQuery);

      WordPress plugin

      If you’re using the WordPress plugin, you should add the following js script in your theme’s footer.php after wp_footer() function:

      <script> (function($){ $(window).load(function(){ _setHighlight(); // set custom highlight positions on page load }).resize(function(){ _setHighlight(); // set custom highlight positions on browser resize }); // custom highlight positions function function _setHighlight(){ $("._mPS2id-t").each(function(i){ var $this=$(this), wh=$(window).height(), targetTop=$this.offset().top; $(document).data("mPS2id")["target_"+(i+1)]={ from:-(targetTop-wh), to:-(targetTop+$this.outerHeight()-wh-1) }; }); } })(jQuery); </script>

      Notes and plugin’s highlighting logic

      I’m not sure why you want to start highlighting the links/sections the moment they enter the bottom of the viewport(?) The plugin is set to use a visual logic, meaning that highlight occurs when the section is within user’s actual visual field (approx. at the middle of the viewport).

      For instance, it’s normal that when a user reads the bottom of section 1, he has already scrolled past the point of where section 2 appears on the screen. This of course depends on your layout but in general, when a user starts viewing/reading a section, this section’s top is at (or has passed) the vertical center of the screen.

      Reply
      • Michal
        Posted on June 10, 2016 at 21:48 Permalink

        Thank you for the extensive reply, I will try your script out. Apologies I should have mentioned I am using the jQuery version. The reason for my request is that I have a navigation in the top left corner which I would like to change colour depending on the background of each section. If section 1 is light and section 2 is dark, the navigation changes to light half way through the screen. So the fixed navigation at the top of the screen becomes light when in fact it still is on a light and not dark background since we can still see the lower half of section 1..

        Reply
        • malihu
          Posted on June 11, 2016 at 15:07 Permalink

          I see. Let me know if the above helps.

          Reply
  23. gretchen
    Posted on May 28, 2016 at 00:19 Permalink

    I am having trouble with the position:fixed navbar on mobile with a horizontal scrolling site. i came back to see how you handled it, and see that you have the same issue—the nav slides off to the left as you scroll. Any ideas on how to fix? I’ve tried backface-visibility and translateZ suggestions from other sites.

    Reply
    • malihu
      Posted on May 29, 2016 at 23:30 Permalink

      I can’t see the navigation menu scrolling with the page on the demos… The fixed element stays fixed (as it should). I’ve checked it on iPad, Windows Phone etc. Does it happen on a particular device/OS/browser?

      Reply
      • gretchen
        Posted on July 14, 2016 at 06:52 Permalink

        works fine on iPad, but scrolls off the screen on iPhone 5 and 6 with iOS 9

        Reply
  24. Leo
    Posted on May 19, 2016 at 23:29 Permalink

    how can i use scrollTo function on wordpress plugin ?

    i want to the page scroll like fullscreen scroll or one page scroll

    like this one http://www.thepetedesign.com/demos/onepage_scroll_demo.html

    Reply
    • malihu
      Posted on May 29, 2016 at 23:43 Permalink

      The scrollTo function can be used within your own scripts and functions (or within scripts by the theme and other plugins). There’s no difference in using the method within WordPress or not. If you have the plugin activated, scrollTo method will work.

      To replicate the layout and functionality on the link you posted, you have to create the one page template along with the javascript functions that’ll hold the events for keyboard arrows and bullet indicators. Within those events you could use the scrollTo method.

      There’s no automatic way of doing all these unless you use a WordPress theme that includes such template.

      Reply
  25. Chris Anderson
    Posted on May 16, 2016 at 18:18 Permalink

    HI.

    Quick question: Just wondering if you can set the pages to auto scroll rather then onclick?

    Reply
    • malihu
      Posted on May 16, 2016 at 19:27 Permalink

      Hi,

      Not sure what you mean by “auto scroll”(?) What would be the triggering action to scroll the page to an id? Can you describe a functionality or a situation you have in mind?

      Perhaps the scrollTo method is what you need but I can’t say for sure.

      Reply
      • chris
        Posted on May 17, 2016 at 17:07 Permalink

        Basically I just mean like a Slideshow. I really like this idea but I guess my situation is a bit different. I will need complex pages of dynamic content which this can handle, but it will be displayed publicly and will scroll automatically. It’s basically going to be like a community events/calendar board.

        Does that make sense?

        Reply
        • malihu
          Posted on May 17, 2016 at 18:30 Permalink

          You can use plugin’s scrollTo method in your own function(s) to trigger a page scroll:
          $.mPageScroll2id("scrollTo","#some-id");

          The only limitation is that the plugin works only on documents root element (html/body). It cannot scroll an overflowed div which is what a typical slider does.

          If you plan to auto-scroll the whole page, then you can easily use the method above in your script(s).

          Reply
          • chris
            Posted on May 17, 2016 at 22:40 Permalink

            Ok great, probably just what I’m looking for. Thanks again for the help. I’ll bug you again if I run into any issues.

            Cheers,
            Chris

        • malihu
          Posted on May 17, 2016 at 23:15 Permalink

          No problem. If you need help let me know.

          Reply
  26. anna esc
    Posted on May 12, 2016 at 20:15 Permalink

    Hi. I would like to know how can I highlight the menu-item “Recetas y consejas” in my webstite (it’s the blog) when I am in a single post. I have tried this and didn’t work:
    .single-post #headerwrap li.menu-item-4583 > a{ color: #00e6b4; }
    Thank you.
    website: http://www.greenstinct.com

    Reply
    • malihu
      Posted on May 13, 2016 at 12:20 Permalink

      I think you should try:
      .single-post #headerwrap #menu-item-4583 > a{ color: #00e6b4; }

      Reply
  27. Mirko
    Posted on April 20, 2016 at 19:57 Permalink

    Hi Manos,

    Just one quick question. Is there a way to delay the start of scrolling?

    This could be useful for mobile devices, especially if there is an fullscreen overlay navigation involved 🙂

    Example: User clicks on the navigation item, navigation is first animated out, and then the scrolling to specific section starts.

    Basically what I want is delay option, in my case it would be the same length as the overlay navigation fade-out animation.

    Reply
    • malihu
      Posted on April 21, 2016 at 04:18 Permalink

      Hi,

      Do you use the plugin within WordPress? Also, do you want this delay when navigating from/to different pages/URL?

      If both of the above apply, you can set a delay for “Scroll to location hash” in plugin settings.

      Reply
      • Mirko
        Posted on April 28, 2016 at 21:51 Permalink

        Hi Manos,

        Sorry for the late reply !

        No, I am using the jQuery version. I just need the delay option that I can use on smaller screens, so that I can finish hiding the overlay navigation and then executing the scroll to desired element.

        Hope ypu get me 🙂

        Reply
        • malihu
          Posted on April 29, 2016 at 13:59 Permalink

          Sure.

          There’s no delay option but you can do it manually.

          You need to disable the click event via the clickEvents option parameter and use plugin’s scrollTo method inside your custom click event with the delay you want.

          I’m posting a working code example which should do what you need:

          (function($){ var ps2idSelector=$("a[rel='m_PageScroll2id']"), //set your element selector ps2idDelay, ps2idTimeout; $(window).load(function(){ ps2idSelector.mPageScroll2id({ clickEvents:false //disable click event }); ps2idSelector.click(function(e){ //add custom click event which calls scrollTo method e.preventDefault(); var $this=$(this); if(ps2idTimeout){clearTimeout(ps2idTimeout);} ps2idTimeout=setTimeout(function(){ //scrollTo method $.mPageScroll2id("scrollTo",$this.attr("href"),{ clicked:$this }); },ps2idDelay); }); }).on("load resize",function(){ //set/change delay accordingly var winSize=$(this).width(); if(winSize<=1024){ ps2idDelay=600; //delay in milliseconds }else{ ps2idDelay=0; } }); })(jQuery);

          Reply
          • Mirko
            Posted on May 4, 2016 at 00:47 Permalink

            Thanks Manos!! Working like a charm 🙂

  28. Brian
    Posted on April 15, 2016 at 20:01 Permalink

    Hello Manos,

    Very nice work on this plugin. I appreciate that you have created it so thoroughly. I was hoping you could help me with one issue I’m having:

    I have the “Enable on WordPress Menu links” option selected and I can’t seem to get the offset to work. I enter a value of 50 as the offset but it does not do anything.

    The page is successfully scrolling to the id but I need it to be offset by 50 pixels or so in order to give me room off of the fixed header.

    The site URL is currently at http://kalamazoocraftsman.com/v2

    Any ideas?

    Thank you,

    Brian

    Reply
    • malihu
      Posted on April 15, 2016 at 20:59 Permalink

      Hello Brian,

      I checked your link and it seems that your menu links are not handled by ‘Page scroll to id’.

      I inspected the links via browser’s dev tools and they have an additional js click event which seems to scroll the page and prevent ‘Page scroll to id’ page scrolling. This is why offset is not working (it’s not calculated because plugin’s click event is overwritten).

      The additional click event is probably coming from a script within your theme or some other plugin(?)
      Maybe there’s a setting to disable it and let ‘Page scroll to id’ handle page scrolling?

      I also created a test link outside the menu (via dev tools) and page scrolling as well as offset worked as expected, which confirms that another script is handling your menu links.

      Reply
  29. choco
    Posted on April 13, 2016 at 01:27 Permalink

    Does this works without user clicking on the section?
    I want it to remember the place it is on reload, will it work for that?

    Reply
    • malihu
      Posted on April 14, 2016 at 00:58 Permalink

      Yes although I’m not sure what you mean.
      Page refreshing will work the same with or without the plugin. For example on the demo, if you scroll down (or click on any link) and then refresh the page, the scroll position will be where it was before (it’s browser’s feature).

      Reply
  30. Benji
    Posted on March 24, 2016 at 19:27 Permalink

    Hello!

    Love your plugin — I’ ve just used it with a site that has a fixed header, however upon scrolling the header jerks up and down. Any ideas? Thanks!

    Reply
    • malihu
      Posted on April 4, 2016 at 17:25 Permalink

      Hello,

      Not sure if you still have this issue but normally, the “jerking” you describe should not be related with ‘Page scroll to id’. Does the header jerking happen when you scroll the page via mousewheel? It sounds more like an issue with the fixed header itself(?)
      Can you send me your link?

      Reply

Comments pages: 1 3 4 5 6 7 8

Post a comment

Cancel reply

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