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


637 Comments

Post a comment

Comments pages: 1 4 5 6 7 8

  1. Muhammad
    Posted on April 26, 2019 at 15:44 Permalink

    Hi. After connecting Page scroll to id, the position: sticky; property does not work on the IPhone. Why?

    Reply
    • malihu
      Posted on April 29, 2019 at 20:32 Permalink

      This is not a plugin issue. The plugin does not modify any CSS on the page.

      The sticky position is changed by this CSS:

      /css/main.css

      See line: 1921

      Hope this helps

      Reply
  2. PB
    Posted on April 17, 2019 at 15:11 Permalink

    Thanks for this plugin, it is getting me really close to where I want to go with my site.

    I’m still having some trouble getting the scrolling to stop at the top of my elements minus the fixed header height. I’m working on a WP site using the X Theme with cornerstone. Using the WP plugin plus the mouse/keyboard add-in wasn’t working so I’ve added all the scripts in functions.php instead. Now it works in principle, but it is very glitchy, the offset seems to scroll differently for each element, and also differently whether scrolling up (there’s a lot of jumpiness on the way up too), or scrolling down. Can you let me know what is likely to be interfering? I’ve turned off the smooth scrolling plugin that is part of the theme already. Could it be using vh values instead of percent or pixels for calculating element size?

    End goal here is to have each mouse/keyboard/touch event scroll one (viewport – header) sized section down or up.

    Reply
    • malihu
      Posted on April 17, 2019 at 17:05 Permalink

      I can’t really help unless I see your page. Many things could tale place that affect page scrolling. Can you post or send me your URL?

      Reply
  3. praveen
    Posted on March 6, 2019 at 06:42 Permalink

    Hey! your plugin is awsome. I used your plugin but i am facing issue with sub-menu in Ipad . If I click parent menu the sub-menu is opened and it is not being closed. can you please help me with the issue? Thanks in advance

    Reply
    • malihu
      Posted on March 6, 2019 at 07:59 Permalink

      The opening/closing of the menu is handled by the menu script (not the plugin). I’d have to see your page in order help because it’ll need an extra js script to close the menu programmatically.

      Reply
  4. Jaro
    Posted on February 26, 2019 at 07:21 Permalink

    Hi can i use class instead of id?
    I mean scroll to class not id.
    Thanks

    Reply
    • malihu
      Posted on March 2, 2019 at 22:39 Permalink

      Hi,

      You cannot use classes. The plugin works strictly with id attributes which should be unique (classes are usually not unique and are used in multiple elements at the same time).

      Reply
  5. Courtney
    Posted on February 25, 2019 at 06:53 Permalink

    Hi, I have an issue with the overflow of the content. I have a bunch of other content on my page, so I only want my horizontal section to scroll left to right, not the rest of content as it just leaves white space. I currently have overflow:scroll to give this effect, but I think this means it does not catch each block as it comes into the view port. I am happy to share URL over email as it is in development and I do not want it in the public domain. Cheers.

    Reply
    • malihu
      Posted on February 25, 2019 at 10:19 Permalink

      Hi,

      The plugin does not work on overflowed elements (FAQ). It works strictly on document’s root element (html, body).

      Reply
  6. Marg
    Posted on December 8, 2018 at 23:46 Permalink

    I’m wondering if it’s possible to change the background of the menu whenever the page scrolls over each section. An example would be the entire menu would turn yellow when scrolling through section #1. Then the entire menu would turn green when scrolling through section #2, etc. Is that possible with this plugin?

    Reply
    • malihu
      Posted on December 10, 2018 at 01:25 Permalink

      The plugin cannot do this automatically because it’s impossible to know which theme and plugin(s) are used that create or handle the menu(s).

      In order to do this, you’ll need custom javascript code developed specifically for your WordPress site and theme.

      “Page scroll to id” offers a way of knowing which target section is currently within the viewport (via the highlight classes), so you’d have to create a script that reads this info and applies the desired CSS to your menu on-the-fly (while the page is scrolling).

      Creating such script is not overly complicated or hard but you’ll need to hire a web developer to do it (unless you know javascript?). If you’re interested in hiring me please contact me via email.

      Reply
  7. Karlo
    Posted on December 8, 2018 at 19:20 Permalink

    How can I use page scroll to id when I have multiple pages? when I set on my first pages in menu settings – ex. kmotstudio.com/#scetion-1 it keeps hovering in my menu all the time. how can I use it correctly. so that it hoovers only when I scroll to that section ?

    Reply
    • malihu
      Posted on December 10, 2018 at 02:13 Permalink

      The “hovering” you see on your links comes from your theme’s stylesheet. This happens because your link reference sections on the same/current page, so the theme (via WordPress) highlights them.

      You need to add the following CSS to your theme (e.g. in Customize -> Additional CSS):

      #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current-menu-item > a._mPS2id-h:after, #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current_page_item > a._mPS2id-h:after, body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li.current-menu-item > a._mPS2id-h:after, .material #header-secondary-outer[data-lhe="animated_underline"] nav >ul.sf-menu >li >a.current-menu-item._mPS2id-h:after{ -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current-menu-item > a._mPS2id-h:hover:after, #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current_page_item > a._mPS2id-h:hover:after, body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li.current-menu-item > a._mPS2id-h:hover:after, .material #header-secondary-outer[data-lhe="animated_underline"] nav >ul.sf-menu >li >a.current-menu-item._mPS2id-h:hover:after{ -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }

      If you want to highlight the links while scrolling the page, also add the following:

      #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current-menu-item > a._mPS2id-h.mPS2id-highlight-first:after, #header-outer[data-lhe="animated_underline"] header#top nav .sf-menu li.current_page_item > a._mPS2id-h.mPS2id-highlight-first:after, body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li.current-menu-item > a._mPS2id-h.mPS2id-highlight-first:after, .material #header-secondary-outer[data-lhe="animated_underline"] nav >ul.sf-menu >li >a.current-menu-item._mPS2id-h.mPS2id-highlight-first:after{ -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }

      Hope this helps

      Reply
  8. James
    Posted on September 6, 2018 at 15:06 Permalink

    Hi Manos.

    Is it possible to use this script to automatically scroll to a section id a few seconds after the page has loaded above the fold – i.e, without the user clicking a link?

    Thanks!

    Reply
    • James
      Posted on September 6, 2018 at 17:22 Permalink

      … I would need to also have an offset. The idea is for the page to scroll up automatically after a few seconds, revealing the first part of content ‘below the fold’.

      I can achieve this with jquery animate but it would be nice to use your plugin as I’m using it elsewhere in the site.

      Thanks

      Reply
  9. Tech TP Guy
    Posted on June 11, 2018 at 13:16 Permalink

    I have a problem with jquery 3.3.1. The plugin doesn’t seem to work. Does it work with the newest jquery or maybe I’m missing something with the configuration?

    Reply
    • malihu
      Posted on June 11, 2018 at 15:35 Permalink

      Yes, the plugin works with jQuery 3.x.
      If you can post the URL of the page you have issues I might be able to help.

      Reply
  10. Sri
    Posted on May 31, 2018 at 17:24 Permalink

    All the themes works on my website but I am not able to see the scroll buttons. Enabled the scroll buttons feature and the mCSB_buttons.png exist in the same folder as CSS file. Can you please guide me where I am going wrong

    Reply
  11. Olivier
    Posted on May 2, 2018 at 16:43 Permalink

    Hello, awesome plugin.
    Is there a way please to use the arrows to go from sections to sections instead of clicking on a menu link?

    thanks a lot

    Reply
    • malihu
      Posted on May 3, 2018 at 09:11 Permalink

      It depends on your page layout. Will there be a menu as well or only arrows?

      If you do have a menu already, you can do it with an extra js script. If not, you’d need to add a hidden menu in addition to the script.

      If you can post the URL of the page you want to do this, I could check it and provide the code.

      Reply
  12. Anna Salander
    Posted on April 23, 2018 at 10:08 Permalink

    Hello, I have a problem with the submenues in mobile mode. Then the plugin doesent work. Could you help me out? The webbsite is not up and running yet Iยดm affraid.

    Any thoughts???

    Anna!

    Reply
    • malihu
      Posted on April 23, 2018 at 23:16 Permalink

      Hi,

      It’s impossible to help with such issues without seeing your page/site. Maybe the mobile menu has its own script for its function which prevents “Page scroll to id” from doing its thing(?)

      Reply
  13. sushant
    Posted on November 18, 2017 at 07:56 Permalink

    Can I convert dot side navigation into carousal to achive vertical timeline on page scroll

    Reply
  14. Arun
    Posted on November 8, 2017 at 21:32 Permalink

    I have a link which appends a div each time it is clicked inside the scroll bar parent. But each time I click the link the page slightly scrolls to top. Not entirely. But a little. Tried “autoScrollOnFocus” false. But thats nt helping. Any help??

    Reply
    • Arun
      Posted on November 8, 2017 at 21:35 Permalink

      Here is the code I m using:

      + Add DIV

      $(“.scrollContent”).mCustomScrollbar({
      axis:”x”,
      theme:”inset”,
      documentTouchScroll: true,
      advanced:{
      autoScrollOnFocus :false,
      autoExpandHorizontalScroll:true,
      updateOnSelectorChange: true
      },
      scrollButtons:{
      enable:true,
      scrollType:”stepped”
      },
      keyboard:{scrollType:”stepped”},
      snapAmount:amount,
      mouseWheel:{scrollAmount:amount}
      });

      Reply
  15. Sera
    Posted on October 31, 2017 at 09:19 Permalink

    Hi the plugin is great. when I clicked a link from a different page is scrolls smoothly to the correct page correct target. but the id attribute shows in the url. The id removes when clicked the link with in the same page. I use wordpress plugin

    Reply
    • malihu
      Posted on October 31, 2017 at 18:27 Permalink

      Hi,

      If you want to keep the id hash in the URL, enable Append the clicked linkโ€™s hash value to browserโ€™s URL/address bar option in plugin settings.

      Is this what you need?

      Reply
      • Sera
        Posted on November 6, 2017 at 12:55 Permalink

        No. I need to remove id hash from url. but it does not remove when I click a menu item from a different page.
        eg: services/example-service

        my menu has a item as example-service
        That section is on services page. if I clicked example-services menu item from services page it scroll smoothly down and does not show id hash in url.

        but if I clicked example-service from another page it goes correctly to services page example-services section but shows Id hash in url. I need to remove that.

        Append the clicked linkโ€™s hash value to browserโ€™s URL/address bar is uncheked in my site.

        menu url s created as custom links and url added as http://mysite.com/services/#example-service

        Reply
        • malihu
          Posted on November 6, 2017 at 14:28 Permalink

          The id attribute should be displayed when going to a different page/URL. This functionality follows standard browser behavior and it usually help users as they are able to add bookmarks, use browser’s back/forward buttons etc.

          There’s no option to remove the id hash when going to a different page target (at least for now). Is there a specific reason for not wanting the id hash displayed when going to a different page?

          Reply
          • Sera
            Posted on November 7, 2017 at 09:03 Permalink

            Yes. Some SEO articals mention Avoiding hashes in URLs that create separate/unique content is a best practice and my client need that. Anyway thank you very much for instant responces and support and also for the awesome plugin.

        • malihu
          Posted on November 9, 2017 at 00:57 Permalink

          The SEO articles that mention avoiding hashes in URL are only for cases where the hash creates/loads additional content (e.g. via ajax calls).

          The above does not apply in your case (and the plugin in general), as your links are simply going to an already existing section but on a different page/URL.

          You don’t have any issue with SEO with in-page id targets which are commonly used (with or without “Page scroll to id”).

          The articles you read refer to cases where a link (with a hash id) is clicked and it’s loading (via ajax) additional content dynamically (without reloading the page) according to the hash id value.

          Reply
  16. Rob
    Posted on October 12, 2017 at 21:00 Permalink

    Hello,

    This plugin is great, but the one thing I can’t get to work, even when it’s ticked, is the option “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)”.

    I have this selected as I am using a fixed top menu for navigation some of my articles, and this behaviour is not applied. The highlight css only is only applied when the link is in the viewport. When I also tick “Highlight by next target” it works slightly better, but only applies the CSS when scrolling, not when still. My site isn’t currently live, I have emailed you the bypass link to see this occuring. Thanks for your help!

    Rob

    Reply
  17. robert
    Posted on September 12, 2017 at 14:57 Permalink

    Hi Malihu,
    Fantastic and light plugin but I have a problem in responsive mode and i cannot solve:
    how can I close the menu automatically when I ‘click’ on id menu?
    > id click > to have a mobile toggle function
    many thank’s

    Reply
    • malihu
      Posted on September 12, 2017 at 22:35 Permalink

      I cannot answer that because it’s out of the scope of the plugin. You can’t do this within the plugin. You need to see if your mobile menu script offers a way to close it on click or you’d need to add an extra custom js script in your page to do this manually.

      Reply
  18. James
    Posted on August 31, 2017 at 17:30 Permalink

    Is there a way to specify the data-ps2id-offset position as a percentage of the viewport height rather than a fixed number of pixels?

    Reply
    • malihu
      Posted on August 31, 2017 at 20:47 Permalink

      No, you can set data-ps2id-offset as an element selector or a fixed pixels number. You can have more complicated offsets for the general offset option (see more info).

      Reply
  19. Mr Chan
    Posted on August 24, 2017 at 21:41 Permalink

    How do I get only the #section that specifies header and footer to work?

    Reply
    • malihu
      Posted on August 25, 2017 at 12:30 Permalink

      I can’t really understand the question. Can you explain in more detail what you need?

      Reply
      • Mr Chan
        Posted on August 25, 2017 at 22:02 Permalink

        How do I make header and footer fixed?

        Reply
        • malihu
          Posted on August 26, 2017 at 00:48 Permalink

          You give the header and footer elements the CSS:
          position: fixed;

          You should have some knowledge of CSS and/or search for a tutorial/example online.

          Reply
  20. Paul
    Posted on August 10, 2017 at 17:36 Permalink

    Hello,

    I’m running into an issue with every anchor link smooth scroll plugin I try to install. The anchor links jump to the page section, but won’t scroll. There could be a conflict with another plugin, but am not sure. Also could be a theme issueโ€”using an older “Gantry” theme.

    Under “advanced options”, the “Prevent other scripts from handling pluginโ€™s links (if possible)” box has been checked. No luck with that though.

    To see an example, you can navigate to this page and click the HSS logo link (under “strategy”), which should send you to another page and scroll down to the “strategy” paragraph, but currently jumps to the section. At the moment, this is the only “page scroll to id” link I have set up.

    Any insight and/or troubleshooting ideas would be appreciated.

    Reply
    • Paul
      Posted on August 10, 2017 at 18:18 Permalink

      Also, when I try adding a css selector such as “a.consulting-nav[href*=’#’]”, the anchor link functionality stops working completely.

      Reply
      • Paul
        Posted on August 10, 2017 at 18:27 Permalink

        Aha! 10 pages into the support forum and I found the solution! Was a conflict with the “jQuery updater” plugin. After deactivating, the scroll functionality works.

        Reply
        • Paul
          Posted on August 10, 2017 at 18:46 Permalink

          Ahh… spoke too soon. After disabling the “jQuery updater” plugin, the anchor links that load another page work, but the one’s that should scroll within the same page do not.

          Example: “contact” button (underneath logo) on this page.

          Reply
          • Paul
            Posted on August 10, 2017 at 22:10 Permalink

            If this helps, after clicking the link, the console gives the following error:

            page-scroll-to-id.min.js?ver=1.6.2:2 Uncaught TypeError: a[s].match is not a function
            at HTMLAnchorElement. (page-scroll-to-id.min.js?ver=1.6.2:2)
            at Function.each (jquery.js?ver=1.12.4:2)
            at a.fn.init.each (jquery.js?ver=1.12.4:2)
            at _scrollSpeed (page-scroll-to-id.min.js?ver=1.6.2:2)
            at _scrollTo (page-scroll-to-id.min.js?ver=1.6.2:2)
            at HTMLAnchorElement. (page-scroll-to-id.min.js?ver=1.6.2:2)
            at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
            at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)

    • Paul
      Posted on August 11, 2017 at 17:31 Permalink

      UPDATE:

      I’ve resolved the issue. Downloaded the developer version of the plugin (https://downloads.wordpress.org/plugin/page-scroll-to-id.zip). Ran into a speed bump trying to upload via the WordPress dashboard. Had to unzip and upload the folder through FTP. Once activated, the newer version of the plugin worked across appropriate links!

      Reply
      • malihu
        Posted on August 15, 2017 at 18:31 Permalink

        Sorry for the late reply (seems I missed your comment). Yes, using the developer version fixes this error. Thanks for posting the solution.

        Reply
  21. John Merlo
    Posted on August 3, 2017 at 01:29 Permalink

    This is at the top of page
    [ps2id id=’some-id’ target=”/]

    this is at bottom when at bottom I want to go to top does not work?
    Back to Top

    Reply
  22. Mr Strangerous
    Posted on July 29, 2017 at 01:58 Permalink

    I’m unsure how to fix this issue, but the plugin works AMAZINGLY – no complaints : There is simply just a rather annoying interference with the theme I currently have – that I also absolutely love (SYDNEY) on WordPress.
    The problem is as follows: The scroll to ID works flawlessly – though instead of stopping so the sticky menu doesn’t overlap it – it simply gets hidden behind. How can I implement a way to make the scroll stop at the MENU rather than the top of the page? Besides this I think this is an absolutely flawless plugin! Great work.

    I’ve tried creating rows above my titles (just for the p2id scroller to stop at, though this has been unsuccesful)

    Reply
  23. Sarah C
    Posted on July 26, 2017 at 03:41 Permalink

    Hi!

    Great plug-in. Thank you.
    You might have answered this question already (cnfr. Scrolling smoothly from/to different pages etc.) but I do not know how to change the Scroll Speed or how to make it Scroll smoothly.
    I’m not on wordpress.

    Could you help me with this?
    Thank you so much,
    Best,
    Sarah

    Reply
    • malihu
      Posted on July 26, 2017 at 19:11 Permalink

      Hello Sarah,

      To have this functionality in the non-WordPress plugin, you need to add extra js/jquery code:

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

      Let me know

      Reply
      • Sarah C
        Posted on July 27, 2017 at 17:15 Permalink

        Hi,

        Thank you for your response.
        So do I have to paste it after this? (see code bellow)

        I’m really new to js so any info would be really helpful. Also, how would I control the speed?

        Thank you so much,
        Best,
        S

        /* plugin constructor functions */

        $.fn[pluginNS]=function(method){
        if(methods[method]){
        return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
        }else if(typeof method==="object" || !method){
        return methods.init.apply(this,arguments);
        }else{
        $.error("Method "+method+" does not exist");
        }
        };
        $[pluginNS]=function(method){
        if(methods[method]){
        return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
        }else if(typeof method==="object" || !method){
        return methods.init.apply(this,arguments);
        }else{
        $.error("Method "+method+" does not exist");
        }
        };

        /*
        allow setting plugin default options.
        example: $.plugin_name.defaults.option_name="option_value";
        */

        $[pluginNS].defaults=defaults;

        })(jQuery,window,document);

        Reply
        • malihu
          Posted on July 28, 2017 at 04:50 Permalink

          No, you don’t need to edit jquery.malihu.PageScroll2id.js. Leave as it is so you can upgrade to a new plugin version easily if/when you need to.

          You simply replace plugin’s function call with the code above.
          For instance, in your HTML:

          <!-- jquery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- plugin script --> <script src="jquery.malihu.PageScroll2id.min.js"></script> <!-- plugin fn call / init --> <script> /* the code I posted goes here... In the code, the actual function call is commented as "Page Scroll to id fn call" (in case you want to modify its options) */ </script>

          Reply
          • sarah
            Posted on July 29, 2017 at 01:32 Permalink

            Thank you!

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

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

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

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

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

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

      Hello,

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

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

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

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

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

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

    Hi, Awesome plugin

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

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

      Hi,

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

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

    Hi there

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

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

    Can you help please?

    Thanks

    James

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

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

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

      Hello,

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

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

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

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

        That’s perfect – thanks!

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

        I’m very grateful.

        ๐Ÿ™‚

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

    Thanks that was helpful

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

    Hey, great plugin!

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

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

    thanks a lot!

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

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

      a._ps2id { color: #c0c0c0; }

      and for the hover state:

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

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

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

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

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

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

      Hi,

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

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

      Example:

      <script>

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

      </script>

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

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

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

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

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

          Reply

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