views:

24

answers:

1

I'm using jQuery and the fragment identifier to create a state change depending on which part of a one-page site the user is currently looking at.

I've finally got this to work but as both Safari and Chrome won't display the fragment identifier I can't make it into a variable and therefore the system breaks down.

Is there a way to force this action specifically for WebKit browsers or another way to access the fragment?

edit: added code below

(function($){
$.fn.sectionMove = function() {

    return this.each(function() {          
    $(this).click(function() {
            if(window.location.hash){
                  var $hash = window.location.hash;
            } else if (!window.location.hash) {
                  var $hash = '#section1';
            }
            $n = $hash.substring($hash.length-1,$hash.length);

            $("div#headerNav ul li:nth-child(" + $n + ") a").removeClass('on');

            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1000,'easeInOutExpo', function(){
                var $hash = window.location.hash;
                $n = $hash.substring($hash.length-1,$hash.length);
                $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on');
            });
            event.preventDefault(); 
        });
     });

   };
})(jQuery);
+1  A: 

I've managed to solve it myself. The problem was with the following lines of my jquery:

$('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top

Whilst that did allow smooth scrolling to take place on the page, it navigated to the anchor without updating the url with the fragment identifier.

If anybody is interested in how to accomplish the same thing then the below code should help. I modified it for my own needs but credit has to go to Arial Flesler (http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links)

function filterPath(a) {
        return a.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '')
    }

    var e = filterPath(location.pathname);
    var f = scrollableElement('html', 'body');
    $('a[href*=#]').each(function () {
        var b = filterPath(this.pathname) || e;
        if (e == b && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            /*var anchor1 = window.location.hash; */
            var c = $(this.hash),
                target = this.hash;
            if (target) {
                var d = c.offset().top;
                $(this).click(function (a) {        

                    a.preventDefault();
                    $(f).animate({
                        scrollTop: d
                    }, 1000,'easeInOutExpo', function () {
                        location.hash = target
                        $("div#headerNav ul li a").removeClass('on');

                        $n = target.substring(target.length-1,target.length);
                        $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on');

                    })
                })
            }
        }
    });
Ian