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 2 3 4 5 6 8

  1. MIKE
    Posted on March 17, 2016 at 14:20 Permalink

    Hello,

    I’m using the Page scroll to id Plugin for WordPress. The plugin run perfect in tablet/mobile but in desktop version dont scroll up and down and I don’t know why.

    I think the nav menu is different in each version, and maybe in desktop version have a conflict with other .js

    Can you help me?

    Elements on top menu: HOME / SERVICIO / QUE HACEMOS and CONTACTO

    URL: http://dev4.mikemiguelez.com/

    Thanks!

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

      Hi,

      It seems that your theme (or some other plugin) is handling your menu links, preventing ‘Page scroll to id’ to animate your page. Check if your theme has a setting which disables menu links scrolling or if you have another plugin which creates your menu.

      Reply
  2. Anthony
    Posted on March 7, 2016 at 19:52 Permalink

    Thanks so much for this! Works great.

    Question: is there a way to disable horizontal scrolling when viewing on mobile?

    Reply
    • malihu
      Posted on March 7, 2016 at 20:57 Permalink

      Do you use the WordPress or the jQuery plugin version? You can disable the plugin below a specific viewport size either manually or via its admin settings in WordPress.

      Reply
  3. Ian
    Posted on March 2, 2016 at 18:21 Permalink

    Hey,
    Great plugin!
    How can I make it scroll so that the bottom of a div aligns to the bottom of the viewport?

    Thanks in advance!

    Reply
    • malihu
      Posted on March 7, 2016 at 21:04 Permalink

      There’s no option to do this automatically. You’d have to use specific offsets for each link (using the data-ps2id-offset attribute) along with a custom js script which will calculate and set the offset according to element/viewport height.

      Reply
  4. Adrian
    Posted on February 22, 2016 at 09:14 Permalink

    Hi, I cannot get this to work on a simple wordpress setup. Please have a look at the url. Great plugin anyway!
    Thanks!

    Reply
    • malihu
      Posted on February 23, 2016 at 04:10 Permalink

      You’re scrolling the page via a custom script at the bottom of your HTML and I can’t find plugin files (.js) in your URL. Do you still need help or did you implement another solution?

      Reply
  5. Alex
    Posted on January 25, 2016 at 13:08 Permalink

    On the page where he works ” page scroll ID”, scrolling the mouse wheel goes in spurts . You can fix this? . Thank you in advance.

    Reply
  6. Kenn
    Posted on January 9, 2016 at 16:04 Permalink

    Dear Manos,

    just had some issues getting Scroll to ID to run in the “contao” cms. Problem was the url rewrite (apache mod_rewrite) which contao uses to eleminate something like “…index.php/…” in the url. I circumvented the problem by using absolute urls instead of just the hash for the links. Don´t know if this will cause other issues but runs fine right now.

    I would suggest adding that tip in the faq under “When I click the link, nothing happens or page “jumps” to the target id without animation”

    Reply
    • malihu
      Posted on January 11, 2016 at 13:42 Permalink

      It won’t cause any issues with the plugin. Thanks for the suggestion (I’ll add it).

      Reply
  7. James Douglas
    Posted on December 31, 2015 at 10:54 Permalink

    Please add support for scrolling sequentially between each target ID, triggered by mouse wheel scroll event.

    Reply
    • malihu
      Posted on December 31, 2015 at 12:00 Permalink

      Thanks for the suggestion!

      This would greatly extend plugin scope and it’d be fairly complicated to find a way to make it work on any markup/layout while keeping the script lightweight.

      The plugin already provides the method to scroll-to programmatically so it’s up to the user to create such functionality using other plugins like jquery-mousewheel. I’ll try posting some tutorials for this but I can’t say for sure that I’ll include such feature in plugin’s core.

      Reply
  8. gretchen
    Posted on December 27, 2015 at 17:05 Permalink

    as seen on mobile using iOS 9.2, both your horizontal demo and a site I’ve built using this plugin are showing all divs—very small—on a single screen. any fixes or suggestions? had been working fine.

    Reply
    • malihu
      Posted on December 28, 2015 at 04:57 Permalink

      This regards the layout of the horizontal demo (and pretty much any CSS horizontal layout with or without the plugin). The fix is to use shrink-to-fit=no in viewport meta (in the head tag of the HTML)

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

      Reply
  9. Kyle
    Posted on December 27, 2015 at 08:04 Permalink

    This plug-in works great on desktop, but for some reason if it’s going from the top of the page on mobile, it scrolls too far.

    Reply
    • malihu
      Posted on December 28, 2015 at 04:59 Permalink

      This issue sounds specific to a CSS/menu/layout(?) so I’d need to see your link in order to help.

      Reply
  10. Anna
    Posted on December 17, 2015 at 23:54 Permalink

    Hello back! I have noticed that the links in the mobile menu do not highlight when the section is visible because they don’t get the mPS2id-highlight class. Is it normal? Thanks

    Reply
    • malihu
      Posted on December 18, 2015 at 15:41 Permalink

      You’ve set “Page layout” in plugin settings to “auto”. Change it back to “vertical” and highlighting on mobile menu should work.

      Reply
      • anna
        Posted on December 21, 2015 at 17:14 Permalink

        I tried but for some reason they do not highlight.

        Reply
        • malihu
          Posted on December 21, 2015 at 17:31 Permalink

          Highlight functionality is working properly.
          You just don’t see it on the front-end because you probably changed your theme (or files) after you made the changes in our previous discussion (http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/comment-page-3/#comment-20560).

          You have to add the CSS again (when you change themes, any changes you’ve made on the previous theme stylesheet are gone).

          Reply
          • anna
            Posted on December 22, 2015 at 12:44 Permalink

            I haven’t changed the theme and the CSS is still there. I see the highlight functionality works fine in the mobile menu only when it is not expanded. Once I expand it, the .mPS2id-highlight class is gone.

        • malihu
          Posted on December 22, 2015 at 16:34 Permalink

          ok I checked the page in more detail and this is what happens:

          When the menu is opened, the content is pushed to the left beyond the point of being readable to the user. The plugin detects that the section is mostly hidden so it removes the highlight.

          This is logical behavior/functionality.
          For example, when you you have the mobile menu opened and you click on “ACERCA DE MÍ”, the page scrolls to this section but you cannot really see/read/use its content, unless you close the menu.

          The plugin highlights the link if its target section is actually visible (enough) to the user. It wouldn’t make sense to highlight a section while the user cannot see/read that section.

          The only thing you could do to provide some indication to the user as to where he is in the menu tree, is to use the clicked class (instead of the highlight) on the mobile menu only. You could normally do this by adding the following to your CSS:

          @media screen and (max-width: 1000px){ #headerwrap #main-nav .current_page_item > a.mPS2id-clicked, #headerwrap #main-nav .current-menu-item > a.mPS2id-clicked{ color: #00e6b4; } }

          I hope this makes sense as to what happens and why 🙂

          Reply
          • anna
            Posted on December 22, 2015 at 18:27 Permalink

            It totally makes sense. Thank you for your help again 😉

        • malihu
          Posted on December 22, 2015 at 18:32 Permalink

          No problem 🙂

          Reply
  11. Joep van der Poel
    Posted on December 3, 2015 at 13:12 Permalink

    Hi Malihu,

    Absolutely love your plugin, so great coding you have done there. I am developing a website that contains a FAQ section.

    In this FAQ section I want to add Icon Boxes for different topics and use your plugin to scroll the respective sections on the page. However the settings of my Icon Box plugin only allow a link to be added in their settings.

    The Icons itself are inserted on the desired page with shortcode thus I can’t use your HTML suggestions. Could you advice me on how to proceed?

    Thank you very much in advance,

    Have a good day,

    Regards,
    Joep

    Reply
    • malihu
      Posted on December 3, 2015 at 21:02 Permalink

      Do you use the plugin in WordPress? Maybe this tutorial helps(?)
      Is the problem that you cannot set a rel attribute on the links? If yes, you can change the “Selector(s)” value in plugin settings to match the element selector you want.

      Reply
      • Joep van der Poel
        Posted on December 4, 2015 at 03:07 Permalink

        Dear Malihu,

        I have fixed the problem using your suggestion. Thank you so much for getting back to me so soon.

        Thanks again for this awesome plugin.

        Have a good day,

        Regards,

        Joep

        Reply
        • malihu
          Posted on December 4, 2015 at 21:41 Permalink

          You’re welcome 🙂

          Reply
  12. Darrell Rogers
    Posted on November 5, 2015 at 12:29 Permalink

    Hi there,

    i’m trying to get a link in my top nav scroll to the widget in the footer but i’m not having any luck.

    I have followed the instructions and added a custom link with #about-us as the link.
    I have added m_PageScroll2id to the XFN link relationship section
    In my footer widget i’ve added this [ps2id id=’#about-us’/]

    Please help. Thanks.

    Reply
    • malihu
      Posted on November 5, 2015 at 13:04 Permalink

      You need: [ps2id id='about-us'/] (without #).

      Reply
  13. Anu
    Posted on October 26, 2015 at 03:22 Permalink

    Hi,

    Its wonderful plugin we used. I have a little issue, when I tried to scroll to the page its not scrolling to particular id. Please advise.

    http://stagingbilli.fmgproductionserver.com/product-info/?productid=331&currcat=BILLI%20COMMERCIAL

    Please advise.

    Thank you.

    Reply
    • malihu
      Posted on October 26, 2015 at 18:27 Permalink

      Hi,

      It does scroll for me. Did you fixed it?

      Reply
      • Anu
        Posted on October 27, 2015 at 00:53 Permalink

        Hi Manos,

        I fixed the scrolling issue but its not scrolling to the title of the section instead it scrolls to the content. Can you please advise me how to fix it?

        Thank you,
        Anu

        Reply
        • malihu
          Posted on October 27, 2015 at 20:25 Permalink

          Your fixed menu is overlapping the content. You should use the offset option parameter (more info).

          For example you could set its value to be your fixed menu selector:
          offset:"body > .navbar"

          Reply
  14. Mirko
    Posted on October 23, 2015 at 21:06 Permalink

    One quick question please. My second section is visible on page load, it is near the bottom of the viewport.

    So, when using the active class, I have both the first and second nav link highlighted as being active.

    Any advice on how to bypass this? Other than moving my second section further down the poge? 🙂

    Thanks

    Reply
    • malihu
      Posted on October 23, 2015 at 22:49 Permalink

      Are you using the WordPress plugin?

      If yes, you can enable ‘Force single highlight’ in plugin settings (more info).

      If not, you can enable forceSingleHighlight option parameter.

      In either case, you can also use .mPS2id-highlight-first or .mPS2id-highlight-last in your CSS (instead of the more general .mPS2id-highlight).

      Reply
      • Mirko
        Posted on October 27, 2015 at 12:15 Permalink

        Hi Manos,

        Thanks for your reply. Unfortunately enabling theforceSingleHighlight parameter still leaves two nav items highlighted.

        I am using the regular plugin BTW. I’ve tried removing the class on page load from second nav item, but of course, the plugin restores it immediately 🙂

        Could you please explain how to use the classses you mention, so that I don’t have two items highlighted at page load?

        Thanks

        Reply
        • malihu
          Posted on October 27, 2015 at 20:34 Permalink

          forceSingleHighlight should normally work.
          You can use the classes the same way you’re using .mPS2id-highlight.

          How do you highlight your nav links?
          If you could send me a link I’d be able to help.

          Reply
          • Mirko
            Posted on October 27, 2015 at 21:10 Permalink

            I am setting a custom active class. I’ve used your plugin before, it always works, but I never had second section this close to the top of the page.

            Here is the link: http://www.madebym.me/test/NameAStar/index.html

            Also, I am using your custom scrollbar plugin, which unfortunately causes the background video to not start playing.

            I am calling it on the body, but the video won’t start.

            Thanks

          • Mirko
            Posted on October 27, 2015 at 21:15 Permalink

            Also, I just realised that the page-scroll-to-id doesn’t work if I am using the custom content scroller!!

        • malihu
          Posted on October 27, 2015 at 21:42 Permalink

          Those 2 plugins are not compatible! That’s why highlight won’t work. Custom scrollbar plugin has its own set of functions for scrolling to anchors etc. while ‘Page scroll to id’ works only with browser’s native/default scrollbar on document’s root element (html/body).

          You can either use ‘Page scroll to id’ without the custom scrollbar or you can use custom scrollbar plugin along with its own scroll-to functions.

          Reply
          • Mirko
            Posted on October 27, 2015 at 22:34 Permalink

            Thanks for the helpful insight, but the forceSingleHighlight still doesn’t work.

            You can visit the link I provided earlier, I removed the custom scrollbar plugin.

            I can live without it, especially knowing that new hybrid devices have issues with custom scrollbar plugins, not just yours 🙂

          • Dryovsky
            Posted on January 8, 2016 at 17:40 Permalink

            Hi!

            How highlight with the custom scrollbar plugin?

            I can not find the function

            Thanks

        • malihu
          Posted on October 27, 2015 at 23:55 Permalink

          For some reason the active class on the links is constantly removed when page scrolling starts and it’s re-applied after some time. Do you have any other script handling page scrolling or the .active class?

          Try setting highlightSelector to your menu links selector, e.g.:
          highlightSelector: ".nav-wrap li a"

          If the above doesn’t work, remove forceSingleHighlight option and change your CSS from using a.active to a.active-first or a.active-last.

          As a last test, try removing highlightClass: "active" and see if plugin’s default classes work along with forceSingleHighlight option (e.g. nav li a.mPS2id-highlight).

          Reply
          • Mirko
            Posted on October 28, 2015 at 03:05 Permalink

            Tried all three of the suggestions, still no luck.

            I’ve removed all scripts except jQuery and your plugin, same thing.

            Think I am gonna need to fake it somehow, put that ID a few pixels below, and give some offset to that individual link.

            That is the only thing that comes to my mind 🙂

        • malihu
          Posted on October 28, 2015 at 04:17 Permalink

          This is weird…
          Can you try removing highlightClass and forceSingleHighlight so I can re-check your page without those?

          Reply
          • Mirko
            Posted on October 28, 2015 at 11:43 Permalink

            Sure, I’ve removed both parameters, only thing left is offset(100).

        • malihu
          Posted on October 28, 2015 at 21:23 Permalink

          Ok leave mPageScroll2id function call as it is (only with the offset option).

          In your CSS (styles.css) change nav li a.active-last and nav li a.active-last:after to nav li a.mPS2id-highlight-last and nav li a.mPS2id-highlight-last:after.

          So your js should be like:

          $("a[rel='m_PageScroll2id']").mPageScroll2id({ offset: 100 });

          and your CSS should be like:

          nav li a.mPS2id-highlight-last{ color: #ffe066; } nav li a.mPS2id-highlight-last:after{ -webkit-transform: translateY(-2px) scale(1); -ms-transform: translateY(-2px) scale(1); transform: translateY(-2px) scale(1); opacity: 1; }

          This should work 😉

          Additionally, if you want to be more precise with your code/functionality you can specify which items are to be highlighted like this:

          $("a[rel='m_PageScroll2id']").mPageScroll2id({ offset: 100, highlightSelector: "nav li a" });

          and in your CSS you can use either .mPS2id-highlight-last or .mPS2id-highlight-first depending to what works best for your layout, e.g.:

          nav li a.mPS2id-highlight-first{ color: #ffe066; } nav li a.mPS2id-highlight-first:after{ -webkit-transform: translateY(-2px) scale(1); -ms-transform: translateY(-2px) scale(1); transform: translateY(-2px) scale(1); opacity: 1; }

          Reply
          • Mirko
            Posted on October 29, 2015 at 00:25 Permalink

            What to say? Many, many thanks for your help 🙂

            In the end the combination of mPS2id-highlight-last and highlightSelector was the winning combo !!

  15. yalon
    Posted on October 21, 2015 at 12:22 Permalink

    Hi
    Great plugin!!!
    I have one problem:Offset….
    When I change the value of offset in the plugin’s page it is working perfectly, but when I insert the offset by code manually for each id, the offset isn’t working (I see animation to the link )
     
    Thanks in advance.

    Reply
    • malihu
      Posted on October 21, 2015 at 17:37 Permalink

      How do you set the offset for each id?
      The following should work:
      <a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>

      Reply
      • yalon
        Posted on October 21, 2015 at 20:13 Permalink

        Hi
        It’s working but this is not what I meant. I want that the menu items of WordPress do the work.
        So I put the data-ps2id-offset at the target div, and that’s not working 🙂

        Reply
        • malihu
          Posted on October 22, 2015 at 01:00 Permalink

          data-ps2id-offset attribute works only on links (not on target elements). I don’t know your page layout or how it works but maybe you could give a top padding to your targets (similar to the offest you want for each one)?

          Reply
          • yalon
            Posted on October 22, 2015 at 11:18 Permalink

            Thanks. Again, great plugin

  16. karthi
    Posted on October 10, 2015 at 12:01 Permalink

    wow what a coding ….. great work…. superrrrr

    Reply
  17. Henri
    Posted on September 29, 2015 at 15:54 Permalink

    Hi,
    I have a one page site to do for a client. but it has to be one page. So your pluggin is great.
    But, the site has to be in two languages.
    Does your plugin work with translation plugins?
    Thanks
    Henri

    Reply
    • malihu
      Posted on September 29, 2015 at 21:26 Permalink

      Plugin functionality is normally not affected at all by the number of languages of the site, as its scope is different from translation plugins and works on top of them. If you need specific help with something let me know 🙂

      Reply
  18. Mabi
    Posted on September 24, 2015 at 10:43 Permalink

    Hi Malihu

    there is a way to link the jump to the headers of a page? So taking instead of an anchor.

    thanks.

    Reply
    • malihu
      Posted on September 25, 2015 at 20:59 Permalink

      What do you mean by “headers of a page”? If you mean the top of the page, you can use the value "#top" in your links(s), which will automatically scroll to the top of the page (the top position of the body element).

      Reply
  19. Nemat
    Posted on September 23, 2015 at 14:11 Permalink

    hi..
    I have installed this pugin but i didn’t get benefit because i want to make one page website but i am not able to how to use?? please give me suggestion.

    after installing i have created menus custom link and rel and use also id etc i hv set offset in plugin setting. i followed all steps but i m not able to use.

    please help me.

    thank you

    Reply
    • malihu
      Posted on September 23, 2015 at 18:54 Permalink

      I cannot help unless you send me a link(?)

      Reply
  20. madir
    Posted on September 17, 2015 at 15:21 Permalink

    hi there,
    thank you for this great plugin.

    I am trying to set scroll speed for different sections. can you please help. ( i am not a coder)

    On the home page I would like the page will scroll automatically after fix amount time. is this possible to achieve?

    thank you.

    Reply
  21. sanket
    Posted on September 9, 2015 at 15:10 Permalink

    Hello,

    How can i make this plugin works on up and down key control to next id.

    Regards
    Sanket

    Reply
    • malihu
      Posted on September 17, 2015 at 18:04 Permalink

      You’ll need a custom script to handle keyboard arrows and call the scrollTo method but the actual script code depends on your page markup and layout.

      A general example would be:

      $(document).bind("keydown keyup",function(e){ //prevent arrows default behaviour on keydown if(e.type==="keydown"){ e.preventDefault(); } //scroll to next/prev sections on keyup (down arrow code is 40, up arrow code is 38) if(e.type==="keyup" && (e.keyCode===40 || e.keyCode===38)){ //get current section var current=$(".mPS2id-target"), //get the id of previous and next sections in an array siblings=[current.prev("._mPS2id-t").attr("id"),current.next("._mPS2id-t").attr("id")], //scroll to previous or next section according to key code to=e.keyCode===38 ? siblings[0] : siblings[1]; //do the actual scrolling using plugin's scrollTo method $.mPageScroll2id("scrollTo",to); } });

      This will work if your sections are next to each other, e.g.:

      <div id="section-1">...</div> <div id="section-2">...</div> <div id="section-3">...</div> <!-- and so on... -->

      If your layout is different, you’ll need to change the siblings variable to match your own element selector(s):

      siblings=[current.prev("._mPS2id-t").attr("id"),current.next("._mPS2id-t").attr("id")]

      Reply
  22. Cayce
    Posted on September 7, 2015 at 05:24 Permalink

    I am trying to use an image as my button, but I have an option of using a link to make it a button. I’m not html savvy at all, so I need a bit of dummification. What my buttons are supposed to scroll to are on the same page, and I have a total of three buttons on that page. How will I do this? Or, if I can’t with links, what do you suggest I use to be able to use an image as a scroll button?

    Reply
    • malihu
      Posted on September 8, 2015 at 00:33 Permalink

      I’m not sure I understand what you’re trying to do… You can have an image inside a link (<a href="#"><img src="..." /></a>). When you say “button” you mean the button html tag (<button>...</button>)?

      Reply
  23. Erin
    Posted on August 27, 2015 at 21:09 Permalink

    Hi, This is a great plugin and I have it working fine on a desktop browser. It won’t work on mobile however. Am I missing a setting somewhere?

    Thanks!

    Reply
    • malihu
      Posted on August 29, 2015 at 23:04 Permalink

      The plugin is basically device-agnostic, so it should work anywhere. Maybe you have a different menu element loaded for mobiles? If you send me you link I’ll be able to help.

      Reply
  24. Ant
    Posted on August 15, 2015 at 05:47 Permalink

    The plugin is not working, jQuery is working, jQuery Smooth Scroll works, but doesn’t have all of the different settings your plugin does.

    I have deactivated other plugins in case of a conflict, still no joy.

    I have enabled the plugin added the rel=”m_PageScroll2id” to link to the

    Nothing!!!!

    Reply
  25. Nick
    Posted on August 9, 2015 at 14:18 Permalink

    Hi, I’m using this plugin on wordpress, but the offset doesn’t seam to work for me.

    I used both positive/negative px values and .class:height(100px) but nothing.

    Can you please help me with this?
    Many thanks in advance.

    Reply
    • malihu
      Posted on August 9, 2015 at 14:43 Permalink

      Can you send me a link?

      Reply
  26. Dimitri
    Posted on July 25, 2015 at 01:09 Permalink

    Hi Malihu, many thanks for this awesome plugin 🙂

    I’ve a little question :
    Is there an easy way to apply the highlight on the parent of the “a” selector, in my case : “li”.
    here is the menu structure I want to obtain :
    <ul> <li class="active"><a href="#link1">Item 1</a><li> // Active item <li><a href="#link2">Item 2</a></li> <li><a href="#link3">Item 3</a></li> <li><a href="#link4">Item 4</a></li> </ul>

    Best regards,
    Dimitri

    Reply
    • malihu
      Posted on August 1, 2015 at 18:41 Permalink

      Hi,

      Currently there’s no way to apply the highlight classes on elements other than the actual links. At least not without using plugin’s callbacks in some custom script, which might be more work than simply changing your menu CSS.

      Reply
  27. David Malmsten
    Posted on July 9, 2015 at 17:32 Permalink

    Hi,

    Nice plugin!

    Just one small question. I tried to change the setting but it won’t take effect. Trying to set the offset to 250 but nothing happens. And the animation speed doesn’t change either?

    What can be the problem?

    Reply
    • malihu
      Posted on July 9, 2015 at 23:14 Permalink

      Hi,

      You need to make sure your links are handled by the plugin. Is there a scrolling animation or the page just “jumps” to the section(s)?

      Reply
  28. Josh
    Posted on July 8, 2015 at 00:32 Permalink

    Hello,

    The plugin was working beautifully but all of a sudden the links do not work when trying to fire off from homepage. They work perfectly fine when on other pages though… Any ideas??? Thank you in advance!

    Reply
    • malihu
      Posted on July 9, 2015 at 23:16 Permalink

      Have you set the full url in your links or just the target hash (e.g. #section)?

      Reply
  29. Tobie
    Posted on June 5, 2015 at 23:22 Permalink

    Only the About page is using your plugin. It works from any other pages except Home… Can you tell me what I need to do in order to make it work navigating from Home also?

    Reply
  30. PRALI
    Posted on May 22, 2015 at 22:05 Permalink

    Hi,

    Page Scroll to Id WordPress plugin is Best for same page Navigation. Based on my Designer Button Plugin user request. i added same page navigation supporting ability to Designer Button plugin. Now designer button supports Page Scroll to Id plugin. Means to get Same page navigation in WordPress First you have to Install Page Scroll to ID plugin and add rel attribute in designer button settings thats it.

    Thanks to developers who developed Page Scroll to Id plugin.

    Reply

Comments pages: 1 2 3 4 5 6 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