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


551 Comments

Post a comment

Comments pages: 1 5 6 7

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

  7. 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