PlusAnchor jQuery Plugin

PlusAnchor is a jQuery plugin I’ve just created. At the moment it solves a simple and specific problem: Anchor links cause the browser scroll to the destination instead of merely jumping there.

How does it work?

It’s very simple, all you need to do is link to the jQuery plugin and activate it by pasting this in your <head> section:

<script type="text/javascript" src="js/jquery.plusanchor.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(document).plusAnchor();
});
</script>

That’s it

It’s a set and forget type of plugin. I’ve got a bunch of extra functionality I’m thinking of building in, but nothing worth talking about yet.
If you have any suggestions, comments or if you find any problems let me know.

Any questions or comments?

  1. Celine says:

    When I try to install this it tells me that the plugin doesn’t have a valid header?

    1. Jamy Golden says:

      Hi Celine.
      How and when does it tell you that?

  2. Celine says:

    When I try to upload it to WordPress through the /wp-content/plugins/ on the Dashboard, it is installed successfully, however when I try to activate the plugin it tells me “the plugin does not have a valid header”. This is happened to me before, and I’ve found solutions online that work, because the plugin files were within a different folder [hard to explain, but search on the Internet incase you don’t get what I mean]. I tried that, but it still did not work? Did I upload the plugin to the wrong path?

    Here’s a screenshot of the error:
    http://i56.tinypic.com/2v9el4l.jpg

  3. Paul says:

    Hi Jamy,

    The script is failing with jquery 1.7.2
    I tested both your copy with 1.7.1 and replaced it with my newer version and confirmed that the effects fail.
    any ideas?
    thanks!
    Paul

    1. Jamy Golden says:

      Could do you have an example of the problem? I downloaded the current version on GitHub and replaced 1.7.1 with 1.7.2 and it seemed to work without a problem.

  4. Christian says:

    Is it possible to create an negative offset to the end-destination?
    Because now it slides down to the correct ID, but the navigationbar itself is covering up for the content..

    1. Jamy Golden says:

      Yes it is possible, I’ve actually recently added this functionality.

      $('body').plusAnchor({
          offsetTop: -20
      });
    2. Alkshendra says:

      Thanks! really helped me. :)

  5. Maxime says:

    Hi, sorry but does your plugin works fine with the last update of jquery ?

    1. Jamy Golden says:

      Weird, there’s a bug on Chrome with jQuery 1.8. I’ll look into it and update asap. Thanks for the heads up

    2. Marko says:

      Hi. I couldn’t get the plugin to work with jquery 1.8.2, so I’ve rolled back on 1.7.2. Luckily, my other scripts are compatibile with older jquery version.

      Jamy, thank you for a nice script, it really saved me some time. I will try to catch some free time tomorrow and look into it.

  6. Steve Johnson says:

    Hi, there seems to be a problem with Safari 6. The links work with IE, Chrome, and FF (multiple versions). But unfortunately they don’t with Safari. Have also tried several versions of jquery. Do you have any suggestions? Cheers

  7. Todd says:

    PlusAnchor 1.0.7.3 w/jquery v1.8.2 works fine in Firefox, but no go in Chrome or Safari. Should I be using a diff version of jquery?

    Thanks for your work!

    1. Todd says:

      nm. got it working. forgot that I wanted different offsets for different links, so that I was calling plusanchor multiple times on diff DOM objects. Reading source, I see how that doesn’t work.

      Thx.

    2. Todd says:

      although interesting it was working in Firefox.

  8. pipdig says:

    I can’t seem to get this to work in the default android browser

    1. Jamy Golden says:

      Thanks, I’ve have a look at this.

  9. Ethan says:

    I’m having that chrome issue as well. Where can I download PlusAnchor 1.0.7.3? your Github says you only have 1.0.1 in the change log.

  10. charles says:

    Hi, awesome plugin.

    How can I change the code to make it scroll horizontal instead ?

    1. Jamy Golden says:

      Hey. Have you found a solution yet? If not I can help you come up with something that will work quite nicely. Send me an email – My details are on the contact page.

  11. Wouter says:

    Hi,

    First of all: great script!
    I’ve noticed it doesn’t work with jQuery 1.9.1 though, at least in Chrome.
    Is that a known issue?

    1. Jamy Golden says:

      I’ll update, get it working and get back to you!

  12. David says:

    AWESOME plug-in!!! I am however experiencing a minor issue. If you go to my site link (http://www.operation6fig.com/test), and click the How it Works button, you will see that you have to click it twice in order for it to get to the right place… Any idea why?

    Thanks so much!!!

    1. Jamy Golden says:

      Hi David. That’s happening because initially the nav adds to the height of #gk-header. Once you pass a certain point it becomes position: fixed, which deosn’t add to the height of the element. So when you click initially it is calculating where the heading will be, but as it moves the page technically “moves up” because #fixeddiv_fixed loses height. So that’s why you have to “click twice” to get it to move to the correct position.

      A fix would be to to give #gk-header a fixed height.

    2. David says:

      Jamy,

      Thank you so much for your help, and the quick response! I added a fixed height to #gk-header, but it’s still not working properly… It’s so frustrating. Any way you can check the code with an inspector and see if I did it right? You are awesome.

      Thanks again for your help, and for the wonderful plugin!

  13. Marius says:

    Still not working on Chrome (with jquery 1.8.2). Any solutions?

    1. Jamy Golden says:

      Which OS? Are you sure you are using the latest PlusAnchor?
      I’ve fixed this problem and works for me (OSx) on Chrome with jQuery 1.8.2 and jQuery 1.9.1

    2. Marius says:

      I’m using Windows 8, jQuery PlusAnchor 1.0.7.3 and jquery-1.8.2.

    3. Marius says:

      I changed a couple of things in the code (to make it compliant with jsLint) and it’s working now. I think the major issue could be here:
      var $this = $(this);
      href = $this.attr(‘href’),
      $name = $(‘a[name=”‘ + $(this).attr(‘href’).substring(1) + ‘”]’);

      I think it’s supposed to be a comma ‘,’ instead of ‘;’ after var $this = $(this);

  14. Oscar says:

    Hi, it seems you forgot to add the offsetTop to $name.length so I changed it to:
    scrollTop: $name.offset().top + base.options.offsetTop

    Also, I wanted the URL to change and set the hash after the animation so I also added that code in both places:

    $(base.scrollEl).animate({
        scrollTop: $(href).offset().top + base.options.offsetTop
    }, base.options.speed, base.options.easing, function() {
        window.history.pushState(null,null,hash) }
    );

    …setting the hash variable beforehand, ofc:

    var hash = this.hash,
        $hash = $(hash);

    Dunno if it will help anyone wanting to do the same thing.

  15. Cory Lee says:

    Is there a WordPress version of this? If not, how would I implement it?

    1. Jamy Golden says:

      There isn’t a wordpress plugin for this. You would simply past the HTML I have added within the post to the <head> section. Assuming the script links correctly, a normal anchor link should automatically start scrolling.

  16. jeremy says:

    great plugin, only thing i have that is happening is when html page first loads it scrolls down to some random point. and i can’t find why? the only calls i have are on hrefs and they all work right. any ideas, why it would autoscroll on load?

    1. Jamy Golden says:

      Strange, I’ll see if I can replicate. Can you send me a link to a page that has this problem?

  17. trevor says:

    Does this plugin still work? I got nothing in Chrome 33

    1. Jamy Golden says:

      There shouldn’t be a problem. What error are you getting? I just tested and everything works in Chrome 35.

  18. Belinda says:

    Great plugin! But I do have a problem, when trying to jump to an anchor from within the section (I have a button within the Supersized slider script). It just won’t slide down, but just “jump” to the anchor. All other anchors are working just fine.

    Any ideas how I can make those links within the supersized script work?

    1. Jamy Golden says:

      Do you have an example of the problem I can have a look at? (sorry for the late reply)

  19. Belinda says:

    It should read “head” section, for some reason it disappeared when posting………

  20. Belinda says:

    Hi,

    First off, great plugin!!!
    I have a minor issue, it doesn’t work on some anchor links. Could you please check out this link: http://stage.pricklybaymarina.com/index.php
    When you click on “Marina” and “Dockage Service”, it works fine and scrolls to the target, but if you click on “Learn more” of the first slide caption, it doesn’t scroll down, but just “jumps”. Can you tell me why?

    1. Jamy Golden says:

      Hi Belinda. Yes that looks like a bug, thanks for letting me know. The problem is because your “Learn More” href is `href=”index.php#yachtmanagementContainer”` where it should be `href=”#yachtmanagementContainer”`. Let me know if you run into any more issues.

Leave a Reply to Marius Cancel reply