Better Page Anchors with Anchor Slider Plugin

Posted By: Mark Aplet 4 Comments October 20, 2009

Here is another simple Mango Blog plugin that uses jQuery to make clicking internal links less jarring by adding an easing effect to select links. The obvious use is the back to top links found in footers, or at the end of long pages. Normally clicking one of these links jumps the page up or down to the specified section. The problem is that the quick jumping can be jarring and disorientating for some users.

Thankfully Cedric Dugas created a jQuery plugin that slides the page up or down with a nice easing effect so that users realize that they are in fact on the same page and not on a new one.

I really like these small finishing touches to sites. I feel that they make  it a much more pleasurable experience.

The jQuery needed is only a few lines of code so at first it hardly seamed necessary to make a Mango Blog plugin from it. But after adding it to 4 sites in a row, I thought it made more sense to go ahead and make it a standalone plugin.

How to use it

Using the Anchor Slide plugin is easy. Just add a class of 'anchorSlide' to your links. That's It! jQuery does the rest! I recommend adding a new empty class in your themes adminEditor.css file of .anchorSlide {} so that you can use it within the TinyMCE editor.

Download Anchor Slider

Plugin version:
0.1
Last Updated:
2009-10-17
Requires:
Mango Blog 1.3+
Auto-install URL:
http://www.visual28.com/assets/content/mango/anchorslider.zip

Tags: Mango Blog · Plugins

4 comments so far ↓

  • 1 Mickey // Jan 26, 2010 at 8:51 PM
    Hi Mark... I'm really enjoying exploring your Mango plugins but for some reason I can't get this one to work. I'm on CF8 and Mango 1.4. I installed the Seb Duggan jQuery plugin. I believe I created my tag properly with the anchorSlide class. But my screen just jumps to the anchor as usual... no smooth slide. When I turn on debugging it looks like it is failing on the jquery.anchor.js file with "Object doesn't support this property or method".

    I'm pretty comfortable with javascript but I don't know beans about jQuery.

    I tried deleting and reinstalling both jquery and anchorslide plugins and clearing the cache and even reloading the Mango config.

    What else can I check?

    BTW - the effect works fine when I use the "Top" link at the bottom of this page so I don't think it is my browser.
    Thanks either way.
  • 2 Mark Aplet // Jan 26, 2010 at 9:01 PM
    Sounds like a possible permissions problem where jquery and the anchor slider js are not being coppied to the plugins folder. You can check to make sure the files exist. If they do not, then it's a permissions issue. You will need to set permissions on the mango blog root folder and propagate the permissions down to all sub-directories. Then reinstall the plugins and it should work. If that doesn't fix it, can you send me a link to your blog where I can check it out for myself?
  • 3 Mickey // Jan 26, 2010 at 9:26 PM
    Thanks for the VERY fast reply. The permissions were fine and the files were there... but since I had debugging on I just stumbled across the answer accidentally. I had previously installed the Lightbox2 plugin and afterward I installed the Shadowbox3 plugin (and never went back to remove Lightbox2). Never caused a problem before.

    I just deactivated Anchorslider and noticed Lightbox2 was also throwing an error. When I deactivated that and reactivated Anchorslider everything worked fine.

    Thanks again!

    P.S. I've only been using Mango for a couple of weeks and my site is not ready for prime time but I'm loving every minute of it. I can't tell you the hours I spent being frustrated by Wordpress. Thanks for all of your hard work and taking the time to explain things.
  • 4 Mark Aplet // Jan 27, 2010 at 7:51 AM
    Lightbox2 uses scriptaculous which can cause issues with jquery in some cases. Sounds like that is the case here. Glad you figured it out.

Leave a Comment

Leave this field empty:

Theme Design By Mark Aplet

Super Powered by Mango Blog