briangonzalez/jquery.arbitrary-anchor.js

⚓ Arbitrary anchors for any element on your page using a little jQuery magic.

jquery.arbitrary-anchor.js

This plugin allows the page to scroll to any arbitrary object on the page based on jQuery/CSS selector.

Visit us on the web or follow me on Twitter for updates: @brianmgonzalez.

Usage

Usage is simple. Just drop it into your page's head after jQuery. Then it just works.

Add to your page:

<script type="text/javascript" src="jquery.arbitrary-anchor.js"></script>

Then you can add any valid jQuery/CSS selector after the hash (#) in your page's URL, and it will automatically be scrolled to. If the selector returns more than 1 element, the first element found will be scrolled to. You can also place a pipe (|) with a value in milliseconds after the selector to change the time it takes to scroll to the given element, e.g. #.mydiv|200 would scroll to the first element with a class of mydiv and it would scroll to it in 200ms.

Example URLs

URL	Scrolls To
http://example.com#raptor	element with ID of or anchor with name of raptor, if none, scroll to first <raptor> element (is that even a thing?)
http://example.com#p	element with ID of or anchor with name of p, if none, scroll to first <p> element
http://example.com##yo-man	first element with ID of yo-man
http://example.com#.brah	first element with class of brah
http://example.com#.sup.brah	first element with class of sup and brah
http://example.com#.sup.brah｜100	first element with class of sup and brah, scrolled to in 100ms (default is 750ms)
http://example.com#footer	element with ID of or anchor with name of footer, or first <footer> element
http://example.com#footer｜200	same as above, scrolled to in 200ms

Custom Easing Functions

You can easily change arbitrary anchor's easing function, which defaults to linear. Once you've added the jquery easing plugin to your page, change the easing function by setting the global configuration variable:

AA_CONFIG.easingFunction = 'easeOutBounce';

Other options

Here are the options, with their defaults:

AA_CONFIG = {
  animationLength:  750,
  easingFunction:   'linear',
  scrollOffset:     0
};

License

MIT

Author

Brian Gonzalez

jquery.arbitrary-anchor.js's Issues

User scroll opposite direction makes it jumpy

If the user tries to scroll opposite direction it makes the scroll jumpy, this should cancel out the scroll

See http://www.virginactive.co.uk/ for an example

Offset?

This is really lightweight and easy to get working, great work!

Is there a way to specify an offset, for instance my top navbar sticks to the top of the page on scroll, so I'd need about a 75px offset on the top

Horizontal scrolling?

Hi,
Is this works on a long-horizontal webpage?

jQuery ScrollTo is a nice plugin for vertical/horizontal scrolling.
https://github.com/flesler/jquery.scrollTo

Not working in FF

Anchor only works on one element

Hi Brian,

First of all, thanks for sharing this plug-in with us, it's a very clever and tidy way of navigating.

I'm very new to jquery and I'm wondering why I can't get it to work for me.
At the moment, I have 5 sections/ anchors I'd like to call on, but can only get the first to work.
The problem with the 2nd is it only bounces on the screen and doesn't return on the section it's assigned to.

To give you a clearer ideas, the beginning of my HTML setup is as follows:

SNUFF BOX THEATRE

    <p>Snuff Box is a collective of theatre makers thriving on guts, grit and heart to create bold new work from a blank page.</p>
  <div class="arrow_down">
    <a href="#.weald"><img src="../../Images/Arrow_down.png" alt="Arrow_down" width="47" height="31" border="0"></a>
    </div>
</main>

WEALD

    <p class="weald"><i>'Life isn't measured in distance travelled, Jim. When the time comes, you say you made a choice.'</i>
    <div class="arrow_down">
    <a href="#.boys"><img src="../../Images/Arrow_down.png" border="0"></a>
    </div>

I've even gone as far as looking into http://arbitrary-anchor.briangonzalez.org/#body and seeing how you set that up. No luck there.

Could you please give me any tips or hints as to why this is happening? I'm aware this has been setup for a while now and it's frustrating going back into the archives for some digging.

Regards
Kay

Safari and multiple hashtags

First of all thank you very much for your script, good job.

Testing my site with all major browsers showed me up an issue without beeing an issue.

Simply: There is only one hashtag allowed in URLs to be valid (http spec).

All Browsers ignore this but Safari changes URL automatically, this means e.g.

mydomain.com/faq/##howtopay
will be changed automatically to
mydomain.com/faq/#%23howtopay

This breaks up the logic of your URL handler = no more scrolling to anchor with the given ID. Is there any workaround to use another character or code snippet to avoid this?

Thank you in advance.

Related links:
http://en.wikipedia.org/wiki/Fragment_identifier
http://stackoverflow.com/questions/4433119/safari-multiple-hashtags
http://www.kriesi.at/support/topic/deeplinks-to-layer-slider-slides-dont-work-safari-escapes-hashtag/

Consecutive clicks on a link with the same hash does nothing

if you click the "#.boats" link then "top" link ( arrow that available page right ) "#.boats" link doesn't work, we need to try another link to be able to work.

Some minor improvements…

Avoid unnecessarily querying the dom, if you already have known entry points

$document = $(this);
//$body = $document.find('body');
$body = $(document.body)
//$html = $document.find('html');
$html = $(document.documentElement);

Check your selectors $('a[href^="#"]') will not find <a href="./file.html#foo"> - which may be resolve to the current URL

The window in window.location.hash is not required as location already is globally accessible.

$('#' + hash) is using jQuery for the sake of it, document.getElementById(hash) does the same with less overhead.

$actualAnchor.length > 0 is the same as $actualAnchor.length as any integer > 0 is truthy.

// replacing https://github.com/briangonzalez/jquery.arbitrary-anchor.js/blob/master/jquery.arbitrary-anchor.js#L67-L74
if ($('#' + hash + ', a[name="' + hash + '"]').length) {
  return;
}

[enhancement] Add missing bower.json.

Hey, maintainer(s) of briangonzalez/jquery.arbitrary-anchor.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library briangonzalez/jquery.arbitrary-anchor.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "briangonzalez/jquery.arbitrary-anchor.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Requires > jquery1.8.2