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.2 (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.
http://opensource.org/licenses/MIT

Pages: 1 2 3 4


548 Comments

Post a comment

Comments pages: 1 2 3 4 7

  1. mystica
    Posted on October 2, 2014 at 16:52 Permalink

    Hi,
    it seems i get a conflict when i use customscrollbar together with scrolltoid
    i mean, custom scrollbars work fine, but if i add scrolltoid, the anchors don’t work, just doesn’t happen anything
    however, if i use only scrolltoid it works fine (without customscrollbars)
    the same happens with the wp plugin
    you can see it in action here
    http://www.unioneimpreseitaliane.it/web/
    (click on “prova” on the left)
    how can i fix that?
    thanks!

    Reply
    • malihu
      Posted on October 2, 2014 at 17:22 Permalink

      Hi,

      Page scroll to id works only with browser’s native scrollbar.

      Custom scrollbars plugin being a js/css scrollbar, has its own method (scrollTo) for scrolling (programmatically) to specific position. For info on how to use the method, see: http://manos.malihu.gr/jquery-custom-content-scroller/#methods-section.

      Reply
      • mystica
        Posted on October 2, 2014 at 19:32 Permalink

        Hi,
        thanks for your reply
        sorry for bothering you, but i can’t get it to work
        in order to scroll the news box, i have this code:
        <script> (function($){ $(window).load(function(){ //news box $("#rpwe_widget-2").mCustomScrollbar({ theme:"dark-thick" }); }); })(jQuery); </script>

        and it works fine
        also, the #main div scrolls horizontally as desired
        now, i can’t get the menu anchors to work
        i have this code:

        <script> $(function(){ $(window).load(function(){ $("#main").mCustomScrollbar({ axis:"x", horizontalScroll:true, scrollInertia:1100, advanced:{ autoExpandHorizontalScroll:true }, /*, callbacks:{ onScroll:function() { alert("scrolled..."); } }, scrollButtons:{ enable:true }*/ }); /* Navigation */ $(".widget ul li a").click(function(){ var myid= $(this).attr("href"); $(".widget ul li a").removeClass('selected'); $(this).addClass('selected'); $("#main").mCustomScrollbar("scrollTo","" + myid + ""); }); }); })(jQuery); </script>

        what am i doing wrong?
        thanks!

        Reply
  2. Roman
    Posted on September 28, 2014 at 19:19 Permalink

    Is there a way to make scroll with mouse wheel possible as well?
    I’d be willing to make a donation for integration of this feature into the plug in.

    Please let me know,
    Thank you!

    Reply
    • malihu
      Posted on September 29, 2014 at 05:43 Permalink

      The plugin offers a way to trigger scrolling programmatically via the scrollTo method (see methods for more info).

      This method, along with the jquery mousewheel plugin can be used to create custom scripts that’ll offer mouse-wheel functionality on specific web apps or pages, e.g.:

      $(selector).on('mousewheel', function(event) { /* your condition logic here using event.deltaY/event.deltaX to set a scroll-to value... */ $.mPageScroll2id("scrollTo", scroll-to value); });

      Scrolling through sections with mouse-wheel has no general scope (no default or standard functionality) and it’s used in very specific situations/layouts. For this reason it cannot be integrated in “Page scroll to id” plugin.

      If you need assistance creating such custom script for a specific web page, I can help 🙂

      Reply
      • Roman
        Posted on October 20, 2014 at 16:50 Permalink

        I have attempted at contacting you via Facebook but got no reply. Is there a better way to contact you privately?

        Reply
        • malihu
          Posted on October 20, 2014 at 18:06 Permalink

          Oh sorry I must have missed your message. We’ll talk through e-mail.

          Reply
  3. pianopiano
    Posted on September 19, 2014 at 21:32 Permalink

    everythink worked out fine until i installed the next plugin “Q2W3 Fixed Widget” http://www.q2w3.ru/q2w3-fixed-widget-wordpress-plugin/ which makes “pagescroll to id” don’t work anymore!
    any ideas???

    Reply
    • malihu
      Posted on September 20, 2014 at 00:51 Permalink

      From what I can see on the Q2W3 Fixed Widget documentation, you probably need to disable “Refresh interval” (set to 0) in Fixed Widget Options.

      Reply
      • pianopiano
        Posted on September 20, 2014 at 22:13 Permalink

        i tried it, but it still jumps directly to the link no page scroll anymore…

        Reply
        • pianopiano
          Posted on September 21, 2014 at 12:29 Permalink

          I found the solution, i had to enable “Use jQuery(window).load() hook” in the fixed widget options. thanx for the great plugin

          Reply
  4. Robin M
    Posted on September 11, 2014 at 17:11 Permalink

    I have a couple of questions. Can I use the link with an image link? If so could you give me an example? I am thinking like an arrow.

    Is there a way to configure so when someone scrolls with their mouse they move from link to link?

    I also am having a hard time understanding what part of the link example I change

    link) and a section with such an id exists in your page (e.g. target).

    Example If I have 5 areas I scroll to do I add a number or something instead of the “id” noted above?
    I am sure this plug in is what I am after, but a more basic user guide would really help.

    Thanks in advance for any help you can give.

    Reply
  5. Quintin
    Posted on September 5, 2014 at 16:32 Permalink

    HI, great plugin, really love it!

    I am just not sure how ti integrate the plugin into the navigation though.

    I am using Ubermenu, and Pagelines DMS2 – i can also use the normal menu and not ubermenu.

    I just need some pointers on how to integrate the “mPS2id-highlight” into the code.

    Thank you.

    Reply
    • malihu
      Posted on September 5, 2014 at 23:10 Permalink

      mPS2id-highlight class is added by the plugin script automatically to menu link(s) when their targets are within the viewport when the page is being scrolled.
      You can use .mPS2id-highlight directly in your theme’s CSS in order to apply a different style on the highlighted link(s).
      More info in Code examples & short tutorials: Links highlighting.

      Reply
  6. Criss
    Posted on September 2, 2014 at 18:30 Permalink

    I have kindly asked you via email some support, I have also asked you on this comment board. What I received is a ban! You can now delete this as well, but still I see no reason to why you denied me help. Good luck with your work.

    Reply
    • malihu
      Posted on September 3, 2014 at 21:53 Permalink

      Hey what ban?
      I’ve already replied to your other comment here: http://manos.malihu.gr/page-scroll-to-id/comment-page-1/#comment-17960

      I haven’t received any “spam” comments from you so I don’t know what you mean by “ban”? Please let me know as maybe my spam protection refused your comment if for instance was posted really fast (this happens automatically).

      Please consider that I’m not denying help to anyone. Most days I get more support requests than I can handle (many plugins, galleries, scripts, here, on github, on WP forums etc.) on top of doing other work in order to make a living…

      Reply
  7. Urs
    Posted on September 1, 2014 at 17:40 Permalink

    Hello,

    first of all thanks for your great work – i love this plugin!

    One Question: have you ever did something like a “stop scrolling” function for touch/swipe and mousewheel scrolling? So that if the user scrolls down (or up), the scrolling stops on the next section in the given direction? Or do you have planned something like that for a future version?

    I have seen your answer concerning the keydown/up question in comment <a href="#comment-17480". Like this way, i can do something similar with some existing jQuery plugins for touch/swipe and mousewheel events, but i would prefer a slim and fast solution instead of using different plugins.

    Any hint would be appreciated! Thanks!

    Reply
    • Lorenzo
      Posted on October 23, 2014 at 19:26 Permalink

      It would be awesome. Any chance of this feature in any future release? Thanks!

      Reply
      • malihu
        Posted on October 24, 2014 at 00:53 Permalink

        These functions aren’t really inside plugin’s scope. In either case you will need additional plugins (e.g. jquery-mousewheel plugin). Page-scroll-to-id provides the necessary methods for triggering scroll-to events externally.

        The pages that restrict mouse-wheel/touch scrolling are too specific on markup and events and it wouldn’t make much sense to code such functionality in the script.

        I’ll try to write some tutorial(s) and/or include examples with the mousewheel plugin in the archive.

        Reply
  8. Bill
    Posted on August 31, 2014 at 14:59 Permalink

    Great plugin. Thanks for making it free.

    When I scroll down manually the highlight will change when the next section gets into the viewport like it’s supposed to. The problem is when a section does not fill the entire viewport the highlight changes before I want it to. How could I make the highlight wait to change until the next section is more like 75% up in the viewport?

    Reply
    • malihu
      Posted on September 1, 2014 at 07:50 Permalink

      Hi,

      You can use the additional plugin highlight classes, useful when multiple short-height sections come into view. These classes are:
      .mPS2id-highlight-first
      .mPS2id-highlight-last

      In your case, you may need to use .mPS2id-highlight-first instead of .mPS2id-highlight which is added in every link that’s connected to a section within the viewport.

      As an example, if you have 3 sections all into view, the html of your links will be like:
      <a class="mPS2id-highlight mPS2id-highlight-first">...</a> <a class="mPS2id-highlight">...</a> <a class="mPS2id-highlight mPS2id-highlight-last">...</a>

      Reply
  9. Cris
    Posted on August 29, 2014 at 15:28 Permalink

    Hello Malihu,

    Great job, congrats!

    I want to ask 2 things:

    1. how to use together two of your scripts 1) page scroll to id & 2) Custom Scrollbar (full page).

    When i use them as single plugin works fine, but when i put them together the page “scroll to id” does not work and the scrollbar(full page) works fine.

    and the 2nd

    2. how, in “page scroll to id”, can i target with one or two links of a menu to show the id element at the bottom of the screen instead show at the top. I tried offset option but in a different resolution doesn’t show in the right position.

    thanks for your help in advance

    Reply
    • malihu
      Posted on August 29, 2014 at 20:11 Permalink

      The two plugin’s are not compatible as Page scroll to id works with browser’s native scrollbar. Custom scrollbar plugin has its own set of methods/events, one of them being the scrollTo method which you can trigger in a script like this:
      $(selector).mCustomScrollbar("scrollTo","#id")

      You can set the offset value based on an element selector (e.g. a menu) instead of a fixed number of pixels (this is handy when your menu is responsive). Is this what you need?

      Reply
      • Cris
        Posted on September 1, 2014 at 01:41 Permalink

        Hello malihu,

        thanks for your answer.

        About the 2 question/answer, i already use element selector, let me rephraze my question.

        i have my link targeting to an id and when i click my link it takes(scroll) me to the id section and naturally it goes at the top of my browser at the beginning of the div id. I want when i click my link to scroll to the specific id but at the bottom of the screen in my browser.

        Γεια χαρά Μάνο,

        σου γράφω και στα ελληνικά τι θέλω να επειδή τα αγγλικά μου δεν είναι και τόσο καλά :).

        Θέλω όταν πατάω πάνω σ’ ένα από τα link του μενού όταν σκρολάρει στο συγκεκριμένο id αντί να με πηγαίνει στην κορυφή της οθόνης μου (στο browser) θα ήθελα να πηγαίνει στο κάτω μέρος.

        Ευχαριστώ και πάλι,

        Reply
        • malihu
          Posted on September 1, 2014 at 19:36 Permalink

          Γεια σου Chris! Τα αγγλικά σου είναι super 🙂

          The plugin allows you to set the offset value as an anonymous function. This would work if your sections have a fixed height (e.g. 200 pixels). For example:
          $(selector).mPageScroll2id({ offset: function(){ return $(window).height()-200 } });

          I can’t really see another way of doing what you describe or even if this solution does help with your page layout…

          Let me know if this helps

          Reply
  10. Michael
    Posted on August 26, 2014 at 15:53 Permalink

    This is a great plugin, thanks for that.

    As i developed it on a static page it worked like a charm but now in the production environment, the plugin won’t highlight the current menu-item.
    What could be the problem? How to the sections are related together (do the navi need the same “href=#section1″ as the section id=”section1”, which I have already!)?

    thanks and best regards, Michael

    Reply
    • Tom
      Posted on December 2, 2014 at 15:59 Permalink

      Hi.

      I have the same problem.
      I noticed that script don’t add class “mPS2id-highlight” to anchor when element is inside List element with current-menu-item class.
      Any ideas how to fix this issue?

      Thanks,
      Tom

      Reply
      • malihu
        Posted on December 2, 2014 at 19:00 Permalink

        On ebookstory.pl, your link “Co robimy” href attribute has a slash (/) before the hash (#). Remove the slash and it’ll work.
        Change:
        href="/#corobimy"
        to:
        href="#corobimy"

        Reply
        • Tom
          Posted on December 3, 2014 at 09:37 Permalink

          Thank you for reply.

          Yes. I know, that if I remove slash befores hash it will be working. But I have page “projects”: http://ebookstory.pl/projekty/ and if you go to “projekty” the menu don’t work, because menu items (except “Co robimy”) has no slash. If menu item has no slash wordpress wont to go to i.e. ebookstory.pl/projekty/#kontakt instead ebookstory.pl/#kontakt

          Can you help me?
          Sorry for my english.

          Thanks,
          Tom

          Reply
          • malihu
            Posted on December 3, 2014 at 09:44 Permalink

            If you need the link to work from everywhere put the absolute URL, e.g. http://ebookstory.pl/#corobimy

        • Tom
          Posted on December 3, 2014 at 11:37 Permalink

          Hi Malihu.
          Can you answer on my question, please?
          Maybe on private e-mail address if you don’t want write here?

          When I have href without slash everythink working on homepage, witch is my one-page-layout page.

          But if I have another page, like mywebsite.com/another-page and menu items are without slash, menu on this page doesn’t work (it works but reffer to the same page, not to parrent page).

          Thansk,
          Tom

          Reply
  11. Criss
    Posted on August 24, 2014 at 15:27 Permalink

    I use to have a site http://www.agendadelvolo.info which had many problems the way I implemented it, then I found your script thus I’m rebuilding the old site. You can see the new one under construction on http://agendadelvolo.info/rebuilt_2/examples/demo-horizontal-layout.html.

    I have two questions, though:

    1) I need to replicate the old menu on the left. In your demo the menu is on the top and if I resize the window it moves nicely on the left. I just need to have a fixed menu on the left but I have played with CSS to no avail.

    2) Offsetting the content section works for all the sections but not for the first one. I have tried specific offset for the “section1” link, but nothing. Solution?

    3) I need to fix the in a centered position but it seems stuck to the section1.

    I’d really appreciate your aid. Criss

    Reply
    • Criss
      Posted on September 1, 2014 at 12:42 Permalink

      too silly a question to be answered ?

      Reply
      • malihu
        Posted on September 1, 2014 at 20:07 Permalink

        Not really. Just too much requests to handle 🙂

        To have the fixed menu always on the left you need to remove from the CSS the media query at the bottom:
        @media only screen and (min-width: 1140px){ ... }

        This will probably fix the offset issues as well.

        Let me know if this helps

        Reply
        • Criss
          Posted on September 3, 2014 at 23:16 Permalink

          I have cut the @media queries and the menu sticks on the left, but the main title desappears. How can I still keep the title, making it fixed at the center?
          The specific offset still don’t work.

          🙂

          Reply
          • malihu
            Posted on September 4, 2014 at 01:26 Permalink

            To make your header fixed you should add these CSS properties to it:
            position: fixed; z-index: 2;
            and also remove width:10% from .horizontal-layout header > *

            To have the text centered you’ll need to add to your header properties:
            width: 100%; text-align: center;

  12. Artur
    Posted on August 20, 2014 at 23:10 Permalink

    Hey it doesnt work for me.

    I created a custom menus an enabled the “Link Relationship (XFN)” and put in “m_PageScroll2id” like in the description. Put in the Link “#title1”

    On the Page I put in target

    It jumps when i click but it not marks when i scroll down.

    What to I do wrong?

    Reply
    • Artur Kosch
      Posted on August 20, 2014 at 23:12 Permalink

      target

      Reply
      • Artur Kosch
        Posted on August 20, 2014 at 23:13 Permalink

        “target”

        without the “

        Reply
        • Artur Kosch
          Posted on August 20, 2014 at 23:14 Permalink

          div id=”title1″>target</div

          Reply
    • Artur Kosch
      Posted on August 20, 2014 at 23:14 Permalink

      sry

      <div id="title1">target</div>

      Reply
    • malihu
      Posted on August 21, 2014 at 01:34 Permalink

      Check if your links and targets are modified by another plugin or script.
      You might also check if your entire content resides in an overflowed div instead of the body tag. If you could send me a link I’d be able to provide more help.

      Reply
      • Artur
        Posted on August 28, 2014 at 15:28 Permalink

        Here is my site:

        http://www.artur-kosch.de/test/

        The menu is at the sidebar!

        Reply
        • malihu
          Posted on August 28, 2014 at 20:56 Permalink

          Your targets don’t have the id attribute and are in the form of:
          <a name="title3"></a>
          The plugin requires an id (not name) attribute in order to work, e.g.:
          <a id="title3"></a>

          Reply
          • Artur Kosch
            Posted on August 30, 2014 at 00:16 Permalink

            I changed, still doesn’t work. 🙁

        • malihu
          Posted on August 30, 2014 at 01:18 Permalink

          You links and/or targets seems to be generated/modified by some other theme script(s). Probably some js script inside dt-presscore theme dir creates/modifies your sidebar menu after ‘Page scroll to id’ plugin is initialized. I don’t know if you can find/edit the script responsible, but if you do, you could add the following jquery code after the menu is ready:
          $.mPageScroll2id();

          Reply
  13. Mirko
    Posted on August 19, 2014 at 03:06 Permalink

    Hi, is it possible to have plugin working with body, html{height:100%} ?
    I can’t get it to work, I tried all sorts of overflows, but no luck :((

    Thanks,

    Mirko

    Reply
    • malihu
      Posted on August 19, 2014 at 16:26 Permalink

      Not really. The plugin works and animates only the root page element (html or body) and not other overflowed elements (such as divs).

      Reply
  14. wsweb
    Posted on August 19, 2014 at 00:19 Permalink

    First of all, Thanks Malihu!
    I’m just a newbie but I have a question which is probably very basic:

    I’m using buttons to scroll to different parts of the page and it works great but if I use “Button A” to scroll from point “A” to point “B” and then I use the scroll bar to go back to “Button A” and click it, it won’t scroll.

    However, if I click on “Button B” to move from point “B” to point “C” and then use the scroll bar to move to back “Button A” and click it, it will scroll. Seems I can’t get it to work two times in a row (the same thing happens to all buttons). Any ideas?

    Thanks in advance

    Reply
    • malihu
      Posted on August 19, 2014 at 16:27 Permalink

      Can’t really say. If you send me link with your implementation I’d be able to help.

      Reply
  15. j
    Posted on August 11, 2014 at 16:23 Permalink

    Giving it for free is honorable but if I could understand your instructions, I’d be already qualified to have written it myself. I’m not a novice either.

    Reply
    • malihu
      Posted on August 14, 2014 at 00:21 Permalink

      1. Insert a link at the top of your page:
      <a href="#id" rel="m_PageScroll2id">link</a>

      2. Further down in your page, insert a div:
      <div id="id">target</div>

      3. Include jQuery in your head tag:
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

      4. Include plugin js file in your head tag:
      <script src="jquery.malihu.PageScroll2id.min.js"></script>

      5. Call plugin function on your link:
      <script> (function($){ $(window).load(function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery); </script>

      Reply
  16. Jason
    Posted on July 26, 2014 at 21:24 Permalink

    Great work – Good job – Simple simple

    Reply
  17. woyndenis
    Posted on July 18, 2014 at 03:21 Permalink

    Hi, Malihu thanks for the plugin. I have been working on WordPress sites for about 7 years and now I couldn’t figure out how to do this. Is it only me? I tried to check if there is any video on youtube and there isn’t any.

    This type of instruction would be helpful to me and people like me. Something like this”

    – First you should do this and that as a precondition (for eg adding the code m_PageScroll2id into the menu which I read it in WP faq )

    – To do this go to this place and do this and that (by giving example etc)

    In general I would have been glad if there was a step by step guide even a video walkthrough of the set up.

    * I installed the plugin 3 days ago but couldn’t do a thing. If you can post a step by step video in youtube I would appreciate it. Thanks.

    Reply
  18. Stefan
    Posted on July 12, 2014 at 22:31 Permalink

    Hey,

    I am quite new to wordpress and I would really love to use your js. When i used it as plugin it only worked for me when i was commenting all the code I had in my function.php file. That was:

    // Add RSS links to <head> section automatic_feed_links(); // Load jQuery if ( !is_admin() ) { wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false); wp_enqueue_script('jquery'); } // Clean up the <head> function removeHeadLinks() { remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link'); } add_action('init', 'removeHeadLinks'); remove_action('wp_head', 'wp_generator'); if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Sidebar Widgets', 'id' => 'sidebar-widgets', 'description' => 'These are widgets for the sidebar.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>' )); }

    Also I would like to enqueue all the js in my function.php file and therefore I uninstalled your plugin again and used the following code to enqueue all the scripts by hand:

    //Add my custom JS scripts: function load_scripts() { if ( is_page('HOME')) { wp_register_script( 'scroller', get_template_directory_uri() . '/js/jquery.malihu.PageScroll2id.js'); wp_enqueue_script( 'scroller' ); wp_register_script( 'my_jquery', get_template_directory_uri() . '/js/jquery.js'); wp_enqueue_script( 'my_jquery' ); } } add_action('wp_enqueue_scripts', 'load_scripts');

    In my_jquery i wrote the code to activate the “plugin”:

    (function($){ $(window).load(function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery);

    Now when I click the links on my homepage its just jumping to the correct position without a smooth effect. Can you help me and tell me what’s wrong with my code?
    Ah, one remark: when i analyse my homepage the js seem to be implementet in the correct way…

    Thanks a lot,
    Stefan

    Reply
    • malihu
      Posted on July 14, 2014 at 15:57 Permalink

      Hello,

      The plugin requires jQuery version 1.6 or later. The part in your functions.php that prevented it is this:
      wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"), false); wp_enqueue_script('jquery');
      as you’re loading jQuery 1.4.1 from Google CDN.

      In your second attempt of adding the plugin manually, you need to load jQuery before jquery.malihu.PageScroll2id.js.
      In wp_register_script function, the third parameter is dependencies ($deps), which is an array of the handles of all the registered scripts that this script depends on, that is the scripts that must be loaded before this script. So you could do it like this:
      wp_register_script( 'scroller', get_template_directory_uri() . '/js/jquery.malihu.PageScroll2id.js', array('jquery'));

      Reply
      • Stefan
        Posted on July 15, 2014 at 12:25 Permalink

        Thank you so much! Works perfectly! Great work!

        Reply
  19. haroon
    Posted on July 12, 2014 at 00:21 Permalink

    great work thanks you saved my job

    Reply
  20. Emily Genevish
    Posted on July 10, 2014 at 18:04 Permalink

    Hi I am trying to implement this on my clients website (sorry its not available for viewing) and I am not able to get the main menu to scroll or anything for that matter. Is it possible it is a conflict?

    Reply
  21. Carst
    Posted on June 21, 2014 at 02:04 Permalink

    Hi

    Great script, I want to use it on this page: https://texelsontwerp.nl/stappenplan
    I integrated it with Joomla, which seems to work pretty well. I only have one question: I can’t go back the last step because the #id is not set in the address like here: http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo-jqaddress.html

    If I change the code, the smooth scrolling is gone, but I’d like to have both options as you can understand ;-).

    Is there a solution for this?

    Regards, Carst

    Reply
    • Carst
      Posted on July 29, 2014 at 22:43 Permalink

      No one a solution for this?

      Reply
  22. Stephan
    Posted on June 15, 2014 at 22:56 Permalink

    Hi! how to use css indent on top of the anchor links?

    I tried this:

    .mPS2id-clicked {
    padding-top: 70px;
    }

    did not work (

    Reply
  23. wing
    Posted on June 11, 2014 at 06:37 Permalink

    I tried to add a slideshow within a section, but no luck. When it is in a div, the scrolling effect seemed to be affected. Any luck out there to include any other jquery effect in the scrolltoID? Furthermore, I am looking for an example showing parallax effect with different divs moving in different speeds both horizontally and vertically.

    Reply
  24. Julian Kingman
    Posted on June 5, 2014 at 07:08 Permalink

    I just tried installing this plugin and it gave me a server error (500). Any idea what’s going on? I’m using pagelines DMS (2) on the latest WordPress. Custom sidebars and ninja forms are the only other activated plugins.

    Reply
  25. Murk
    Posted on June 4, 2014 at 11:11 Permalink

    Hello Malihu,

    Would it be possible to trigger the url to change (on the fly) while scrolling?
    Somewhat like the menu (active state) does change while scrolling?

    Thanks, Murk

    Reply
    • malihu
      Posted on June 4, 2014 at 21:07 Permalink

      You’d need to write extra code to do that but in my opinion it can be counter-productive without offering anything significant to the user.

      Among others, you would need to prevent the browser from keeping history while scrolling (but not when clicking links) because otherwise, you’d need to hit browser’s “Back” button like 50 times to actually go back.

      To answer the question, yes it is possible but it would require a more or less complicated script to make it work right while the result could still be questionable.

      Reply
      • Murk
        Posted on June 5, 2014 at 09:41 Permalink

        Hi Malihu,

        That sounds like good reasons not to want this functionality.
        Thanks for your clear and comprehensive answer!

        Best regards, Murk

        Reply
  26. Murk
    Posted on June 4, 2014 at 00:46 Permalink

    Hello Malihu,

    Your plugin functions really nice!

    I’m using it in WordPress now, and I have one problem, perhaps you can help me on this.
    I would like to use the hashchange funtion, so copied the code from your demo file to my template.
    The page does scroll nicely, but the URL does not change.

    <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery.hashchange.min.js"></script> <script src="jquery.malihu.PageScroll2id.js"></script> <script> (function($){ $(window).load(function(){ $("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:"#navigation-menu a" }); $(window).hashchange(function(){ var loc=window.location, to=loc.hash.split("/")[1] || "#top"; $.mPageScroll2id("scrollTo",to,{ clicked:$("a[href='"+loc+"'],a[href='"+loc.hash+"']") }); }); }); })(jQuery); </script>

    The hashchange function does work when I leave this part out:

    $("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:"#navigation-menu a" });

    But than there is no scrolling.

    I hope you can help me, thanks in advance for your reply.

    Reply
    • malihu
      Posted on June 4, 2014 at 01:43 Permalink

      Hello,

      So, you implemented the plugin manually (meaning there’s no Page scroll to id plugin in your Plugins page), correct?

      If yes, you’ll need to add a[rel='m_PageScroll2id'] to your links manually.
      Also, you need to change “#navigation-menu a” to the selector matching your navigation menu links (e.g. “menu-item a”).

      It probably doesn’t work because your links href value should be in the form of #/id (notice the slash after the hash) which is the format of the haschange plugin.

      Reply
      • Murk
        Posted on June 4, 2014 at 10:53 Permalink

        Hi Malihu,

        Thank you very much for your quick response.
        The slash after the # does the trick!
        This makes my day (and many more days to come…).

        Best regards, Murk

        Reply
  27. Timothy
    Posted on June 3, 2014 at 21:02 Permalink

    Hi!

    So, I decided to use your plugin to navigate on my one-page site, and when it comes to the scrolling and navigation it works like a charm! Thank you for that.

    But I’m facing problems with the highlighting. I think that my theme dosen’t allow the plugin to control the highlighting or something. I added:
    .menu-item a.mPS2id-highlight{ color: #2ea3f2 !important; }

    To the CSS, and still no difference… My current theme is highlighting all the links connected to an anchor on that page, and I don’t know if I have set everything up correctly. I have left all the default settings in the plugin too.

    Would you mind taking a look for me?

    Thanks in advance,
    Timothy

    Reply
    • malihu
      Posted on June 4, 2014 at 00:34 Permalink

      Sure send me a link.
      As a note, if you have many types of links handled by the plugin (e.g. primary navigation links, back-to-top link, next/previous links etc.), you might need to set the ‘Highlight selector(s)’ to the selector you need highlighted (e.g. menu-item a).

      Reply
  28. TG
    Posted on June 2, 2014 at 19:49 Permalink

    This plugin is genius! Thank you for it!

    One question: I was successful in using the css you provided to get the active item to have a colored background. Here’s what Iused:
    .menu-item a.mPS2id-highlight{ background: #2ea3f2; }

    Instead of this, I’d like the active menu item to be BOLD and in a specific color. How would I revise the CSS to make this work?

    Thanks again for an excellent solution.

    T.

    Reply
    • malihu
      Posted on June 3, 2014 at 00:10 Permalink

      Like this:
      .menu-item a.mPS2id-highlight{ font-weight: bold; color: #2ea3f2; }

      Reply
      • TG
        Posted on June 3, 2014 at 01:57 Permalink

        Thanks very much for your fast response. On my site, the bolding works, but the highlight color doesn’t. Is there something I’m missing?

        Reply
        • malihu
          Posted on June 3, 2014 at 03:08 Permalink

          There’s probably another more-specific CSS rule that overwrites .menu-item a.mPS2id-highlight.
          A quick solution is to add !important in your rule:
          .menu-item a.mPS2id-highlight{ font-weight: bold; color: #2ea3f2 !important; }

          Reply
          • TG
            Posted on June 3, 2014 at 03:14 Permalink

            That did the trick. Thank you!

  29. Raulg
    Posted on May 29, 2014 at 11:41 Permalink

    Hi guys. Love the plugin. Is there a way to mane the me u items do the same thing? I can’t figure it out :/

    Reply
    • malihu
      Posted on May 29, 2014 at 22:45 Permalink

      Hi, what do you mean by “doing the same thing”?

      Reply
      • raulg
        Posted on May 30, 2014 at 05:29 Permalink

        basically how do I get the scroll down affect using the menu items through wordpress

        Reply
        • raulg
          Posted on May 30, 2014 at 05:39 Permalink

          nevermind. I figure it out. You go to Apperence>Menus
          Add a new Link menu item and leave the URL box empty, then paste this on to the name box:
          VIEW PORTFOLIO

          or whichever id and name you want. Thanks guys!!

          Reply
          • malihu
            Posted on May 30, 2014 at 06:13 Permalink

            Also, please check “How to use the plugin with WordPress custom/native menus?” in plugin’s FAQ:
            http://manos.malihu.gr/page-scroll-to-id/3/
            and
            http://wordpress.org/plugins/page-scroll-to-id/faq/

            While on WP ‘Menus’ admin page, you need to click ‘Screen Options’ and check ‘Link Relationship (XFN)’. Click the arrow on the right of any menu item and insert m_PageScroll2id in the ‘Link Relationship (XFN)’ field. This will add the rel="m_PageScroll2id" to your link(s) which is plugin’s default selector.

          • raulg
            Posted on May 31, 2014 at 10:06 Permalink

            oh!!!! even better! Thanks so much. You guys rock!

  30. andrei
    Posted on May 24, 2014 at 12:32 Permalink

    Please, help me out with this one: How can I get all pages content on the main page so I can see the scroll down effect?

    I’ve did all settings but what I see on the main page is just the content of the main page not the others 🙁

    Thanks!

    Reply
    • malihu
      Posted on May 29, 2014 at 22:48 Permalink

      Hello,
      The plugin does not manipulate your content, page layout or theme. It’s scope is to “connect” link and destination targets elements in the page.

      Reply

Comments pages: 1 2 3 4 7

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