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

Page scroll to id

Code examples & short tutorials

Using offsets

You can offset the scroll-to position via the offset option parameter and/or via the data-ps2id-offset html attribute.

offset option parameter provides a general offset for all the links handled by the plugin. For example, setting offset value to 50 will stop page scrolling 50 pixels before reaching the target

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:50
});
data-ps2id-offset attribute provides link specific offsets. The data attribute overwrites the offset option and is useful when you need to set a different offset for a link

<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>

When the link above is clicked, it will stop page scrolling 100 pixels before reaching the target.

The offset value can be a positive or negative number, a string representing an element selector, a js or jquery object, a function or an array of values.

Integer

Offsets scroll-to position by x amount of pixels (positive or negative number). Examples:

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:50
});
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>
$.mPageScroll2id("scrollTo","#id",{
    offset:-50
});

String

Offsets scroll-to position by element height/width/position. Examples:

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:"#id"
});
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset=".class-name">link</a>

js/jquery object

Offsets scroll-to position by element height/width/position. Examples:

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:document.getElementById("id")
});
$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:$("#id")
});

Function

Offsets scroll-to position via function. Examples:

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

function offsetFn(){
    var myOffsetY=50,
      myOffsetX=100;
    return [myOffsetY,myOffsetX];
}

Array

Offsets vertical (y) and horizontal (x) scroll-to positions separately. Examples:

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:{"y":"50","x":"100"}
});
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset='{"y":"#id","x":"0"}'>link</a>
$("a[rel='m_PageScroll2id']").mPageScroll2id({
    offset:{"y":document.getElementsByTagName("nav") || "ul.nav","x":"0"}
});

User defined callbacks

You can trigger your own js function(s) by calling them inside onStart and onComplete option parameters. For example:

$("a[rel='m_PageScroll2id']").mPageScroll2id({
    onStart:function(){
        myCustomFn1();
    },
    onComplete:function(){
        myCustomFn2();
    }
});

function myCustomFn1(){
    console.log(mPS2id.target.attr("id"));
}
function myCustomFn2(){
    console.log(mPS2id.scrollTo.y);
}

Returning values

The script returns the following values and objects

  • mPS2id.trigger – the event which triggered page scrolling. Returned values: “selector” (click), “scrollTo” (method)
  • mPS2id.clicked – the element that was clicked as jQuery object
  • mPS2id.target – the target element as jQuery object
  • mPS2id.scrollTo.y – the vertical scroll-to position (pixels)
  • mPS2id.scrollTo.x – the horizontal scroll-to position (pixels)

Using Page scroll to id with deep linking plugins

There are many solutions for deep linking via javascript. The archive contains examples of using Page scroll to id with jquery.address and jquery-hashchange.

Normally, you’ll use plugin’s scrollTo method to trigger page scroll in hash-change events. If you need to disable the click events of selectors, set clickEvents to false

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

$(window).hashchange(function(){
  var loc=window.location,
    to=loc.hash.split("/")[1] || "#top";
  $.mPageScroll2id("scrollTo",to,{
    clicked:$("a[href='"+loc+"'],a[href='"+loc.hash+"']")
  });
});

Dynamic content

When adding links and/or sections to your page dynamically (e.g. via ajax, js click events etc.) you may need to re-call mPageScroll2id function after your new content is fully loaded: $.mPageScroll2id(); This ensures the script will highlight your newly added links and targets correctly. If you don’t use plugin’s highlight feature, you can skip mPageScroll2id function call.

The plugin highlights links automatically. When the page is scrolled (by clicking a link, mouse-wheel, touch-swipe etc.), the script checks if a target element is within the viewport and adds a highlight class (default: mPS2id-highlight) to the corresponding link(s).

You can change the default highlight class to your own, through the highlightClass option parameter

$("a[rel='m_PageScroll2id']").mPageScroll2id({
  highlightClass:"highlighted-menu-item"
});

By default, all links handled by the plugin are eligible for highlighting. Normally, you’d want to highlight only certain links such as those in navigation menus and not others like back-to-top. This can be achieved either by styling only the CSS selector you want, for example:

.menu a.mPS2id-highlight{ 
    background: #ff0; 
}

or by inserting the selectors subset in the highlightSelector option parameter

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

The plugin also provides a way of manually setting the highlight positions of each target element. If you need to set a specific area (in pixels) at which the highlight class is added, use the option parameter target_ followed by the number of your target within your document

$("a[rel='m_PageScroll2id']").mPageScroll2id({
  target_1:{ from:0, to:-799 },
  target_2:{ from:-800, to:-1599 },
  target_3:{ from:-1600, to:-2399 }
});

The target_ option gets the values { from, to, fromX, toX }

When multiple targets are within the viewport, more than one links will be highlighted simultaneously. If you don’t want this behavior, set forceSingleHighlight option parameter to true

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

Alternatively, you can target the first and last highlighted elements by using the classes .mPS2id-highlight-first and .mPS2id-highlight-last.


Plugin home     Project on GitHub

Pages: 1 2 3 4


566 Comments

Post a comment

Comments pages: 1 5 6 7

  1. Mark
    Posted on November 8, 2019 at 04:35 Permalink

    First and foremost thank you for this wonderful plugin.

    For the links to work for the hamburger menu links on a one-page site, I cannot use ‘#link’ but must use a full path ‘https://beatballaballa.com/beta-phase/#link’.

    But that ruins the smooth scrolling effect.

    Here’s what happens:

    The page loads ‘https://beatballaballa.com/#presse’
    then hops back to the top of the page:
    ‘https://beatballaballa.com/#’, after which it loads:
    ‘https://beatballaballa.com/#presse’

    Is there something I can do to get the instant scrolling effect back that I get with ‘#presse’.

    Thank you either way for your great plugin and help,

    Mark

    Reply
  2. haim
    Posted on October 29, 2019 at 15:53 Permalink

    Hi!
    Thanks for your amazing plugin.

    Sometimes the “Scroll from/to different pages (i.e. scroll to target when page loads)” works, and sometimes not.

    It’s hppaning in the same website:
    Working – https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D/#s8
    Not working – https://chizki.com/solutions/#s8

    I’d glad to know what should I do to fix it. I want it to work in all pages.
    Thanks!

    Reply
    • malihu
      Posted on October 29, 2019 at 18:27 Permalink

      Hello,

      On the https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D page, the s8 target element exists and that’s why it works.

      On the https://chizki.com/solutions/ page, there’s no s8 target element, so it doesn’t work.

      These are different pages, so you need to also add the s8 id on the /solutions/ page.

      Let me know

      Reply
      • Haim
        Posted on October 30, 2019 at 17:10 Permalink

        Thanks, you were right.

        But what about here?
        https://levi-david.com/%D7%94%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D-%D7%A9%D7%9C%D7%A0%D7%95/#s4

        Here all the sections have a different ID, and yet it didn’t scroll to them when loading the page

        Reply
        • malihu
          Posted on October 31, 2019 at 01:29 Permalink

          No problem.

          In the page you posted there are few elementor links with custom actions that conflict with the plugin.

          Try this:

          Go to “Page scroll to id” settings and add the following at the end of the selectors are excluded field (just copy/paste the code below including the comma and space at the beginning):

          , #elementor-action

          Save changes and test your page.

          Reply
        • malihu
          Posted on November 11, 2019 at 16:17 Permalink

          Ah sorry, I posted the wrong selector! Change it to this:

          , a[href*='#elementor-action']

          Save changes and test. Let me know if it worked 🙂

          Reply
  3. Yaroslav
    Posted on October 20, 2019 at 09:18 Permalink

    Hello Malihu!

    Thank you for developing Page scroll to 2id plugin, it’s great to use it.

    My question:

    I have installed JinvertScroll script on WordPress website for a horizontal scrolling and also installed Page scroll to 2id plugin with a “Prevent other scripts from handling plugin’s links” and “auto” orientation adjustments but now i have a problem with scrolling to my Page scroll to 2id sectors: after clicking the button the screen moves only for a very little to the right but not to the Page scroll to 2id sector that i need and adjusted. PS: when i deleted JinvertScroll script all began work as normal but the page became as a vertical but not a horizontal orientation. I read some your answers here so maybe the problem with CSS. Also i implemented your script with only mouse wheel scrolling effect but the situation was the same: screen only moved to one direction to the right but not back by mouse wheel.

    Can you give a useful advices what to do? Thank you in advance!

    Reply
    • malihu
      Posted on October 20, 2019 at 21:31 Permalink

      Hello,

      I need to see your page/site in order to help with such issues.

      That said, “Page scroll to id” does not convert a page’s template design from vertical to horizontal (and vice versa). By using the horizontal or auto layout in plugin settings, you simply instruct the plugin the direction it should scroll (but your page should already have a horizontal design/layout).

      Also, the plugin does not scroll overflowed divs. It works strictly on document’s root element (html/body).

      I’m not sure if any of the above is the issue. If you can post your page/site URL, I’ll be able to check it and help if I can.

      Reply
  4. Koru Ux Design
    Posted on September 4, 2019 at 10:17 Permalink

    This is really valuable information and very practical to get done.

    Is there any resource for the new updates as well?

    Thank you!

    Reply
  5. Stijn
    Posted on July 8, 2019 at 14:07 Permalink

    Hi,

    I’m using the scroll to id and custom scrollbar plugin. It works well, but I can’t find out how I can set the highlightClass on scroll and on click

    Reply
  6. MarkR
    Posted on June 20, 2019 at 01:51 Permalink

    I have your mCustomScrollBar and m_PageScroll2id plugins installed on a page that jumps to IDs like this:

    <a href="#bkmk11" class="web_address" style="text-decoration: none" rel"m_PageScroll2id">How does this work?</a><br>

    that jumps to IDs like this:

    <div class="h1_info" id="bkmk11"><b>How does this work</b></div><br>

    But when it gets there, the scrollbar disappears. If I try to scroll with the mouse wheel, the cursor jumps back to the top and the scrollbar reappears.

    You show a callback that will return the scrollTo.y property but that only returns the position; it doesn’t allow me to mouse from there.

    function myCustomFn2(){ console.log(mPS2id.scrollTo.y);}

    I need to update the mouse position but your code doesn’t show how to do that. I really hope you can help with this. Both plugins are great!

    I am going to credit you on my website when it goes live in two weeks. The site has a very innovative design. PLEASE HELP.

    Thanks,

    Mark

    Reply
    • malihu
      Posted on June 20, 2019 at 09:53 Permalink

      The 2 plugins are not compatible. They don’t work together as “Page scroll to id” works only with browser’s native scrollbar.

      Javascript scrollbars (like mCustomScrollBar) have their own methods for scrolling the page. You can see the method here and a related guide here.

      Reply
  7. Mark
    Posted on June 14, 2019 at 09:39 Permalink
    • malihu
      Posted on June 15, 2019 at 03:07 Permalink

      The plugin works strictly on anchor elements (i.e. links) with a valid href/URL attribute.

      The only way to do it on a div, would be via javascript, e.g. by using plugin’s scrollTo method to scroll to the target element when the div is clicked. For this you’d need to add a custom js script in your template.

      Reply
  8. Akro Web
    Posted on May 29, 2019 at 11:55 Permalink

    Navigation blocked

    Hello,
    I have several sites that use your plugin.
    I just noticed that since this morning, your plugin has been blocking my sites:
    – links/menus no longer work
    – my browser tells me: “A web page slows down your browser. What do you want to do?”

    We can no longer browse the sites and they are therefore inaccessible.
    I disabled the plugin, the problem is solved but of course the “scroll” function no longer works.

    Do you know what the problem is.

    I have the latest updates of wordpress and my plugins.

    Thank you.

    Sorry about my English, I’m French.

    Thank you.

    Reply
  9. giuse
    Posted on May 25, 2019 at 11:30 Permalink

    Hi,

    with the plugin update I got an issue

    with version 1.6.5
    link with href like http://www.xxxxxx.com/page/#id are no longer underlined, while they were with 1.6.4
    link with href like #id are still underlined, as they were with 1.6.4

    Reply
    • malihu
      Posted on May 25, 2019 at 12:10 Permalink

      This sounds like a css issue. If you post your site url, I’ll be able to check what happens and help.

      Reply
      • giuse
        Posted on May 27, 2019 at 09:01 Permalink

        Hi

        this is the page that does not work anymore with 1.6.5
        http://www.gianesing.com/it/azienda/

        Reply
        • malihu
          Posted on May 27, 2019 at 13:47 Permalink

          It seems you’re using the “Q2W3 Fixed Widget” plugin, right?
          Did you update the Q2W3 plugin too or change its settings?

          Please check the following thread and see if changing the Q2W3 plugin options mentioned, fixes the issue:

          https://wordpress.org/support/topic/conflict-with-q2w3-fixed-widget-1/

          Reply
          • giuse
            Posted on May 28, 2019 at 08:19 Permalink

            Hi,

            I have Q2W3 5.1.9, the latest available.

            The thread is about Q2W3 not working, in my case is page-scroll-to-id that does not work as expected. Any case I tried to do what suggested in thread, but it doen not work.

    • malihu
      Posted on May 27, 2019 at 19:26 Permalink

      Hello again,

      I think the issue you’re having might be related to an issue in version 1.6.5.

      I’ve pushed a fix for this issue in plugin’s development version:

      https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

      Please replace version 1.6.5 with the one above and check if the issue is fixed.

      Let me know

      Reply
  10. Klaus Meschir
    Posted on May 24, 2019 at 08:59 Permalink

    Hi,

    i’m test your plugin for this website, but I have a problem. When I click the link in menu once, it scrolls to the anchor but it work only at the first time. The menu-link is deactivated after clicking.
    I changed in the settings “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target2 on and off but this has no effect for my problem. I use the WPBakery Plugin.

    Thanks for your help.

    Reply
    • malihu
      Posted on May 24, 2019 at 13:24 Permalink

      Hello,

      The problem you have does not come from “Page scroll to id”. It comes from your theme’s internal function for scrolling the page. The 2 scripts that do this are:

      ...themes/suffice-pro/assets/js/smooth-scroll.min.js
      ...themes/suffice-pro/assets/js/suffice-custom.min.js

      Try this:

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

      If this doesn’t work, you’ll need to see if there’s an option in your theme settings to disable page smooth scrolling for same-page links.

      Let me know

      Reply
      • Klaus Meschir
        Posted on May 27, 2019 at 11:29 Permalink

        Hello,

        i try check “Prevent other scripts…” and deactivate the “back to top”-function in theme but the problem is the same.

        Thanks for your reply.

        Reply
        • malihu
          Posted on May 27, 2019 at 13:54 Permalink

          In plugin settings, enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test again.

          Reply
          • Klaus Meschir
            Posted on May 28, 2019 at 15:48 Permalink

            Hello,

            that’s is the Solution. After checking this option i can jump between the anchors.

            Thanks for your help.

  11. Tomas Risberg
    Posted on May 22, 2019 at 21:22 Permalink

    Hi,

    After updating to Page scroll to id version 1.6.5 it scrolls too fast, and doesn’t stop the scrolling were it should stop it.

    This page illustrates the problem:

    https://silent.se/psy/overklighet

    Click on for example [1] and you see what happens.

    Reply
    • malihu
      Posted on May 22, 2019 at 21:36 Permalink

      Hi,

      Did you installed another plugin, e.g. auto-optimize?

      Reply
      • Tomas Risberg
        Posted on May 22, 2019 at 23:19 Permalink

        Thanks for your reply. Yes, at the same time as updating Page scroll to id I updated Autoptimize, WP Rocket and WordPress.

        Reply
        • malihu
          Posted on May 23, 2019 at 02:47 Permalink

          Can you flush/clear your site cache (wp rocket)?

          Reply
          • Tomas Risberg
            Posted on May 23, 2019 at 07:46 Permalink

            I have deleted the cache of Autoptimize and flushed the cache of WP Rocket. The problem remains.

Comments pages: 1 5 6 7

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