change url according to the selected # href with jquery

I have a content slider and I want that the respective link of the content navigation is always shown in the url, so that I can also link to contents of the slider that are not shown by default. e.g. www.example.com/#exampleLink

I know that I can find the according link via $(this).attr("href") but I don't know how to attach it to the url.. and of course I also don't want the screen to jump to the top of the container when one of the navigation links is clicked..

Thanks in advance for your help!

here is my script:

$(document).ready(function (){

    var itemCount = $('.container div').size();
    var itemWidth = $('.container div').width();


    $('.container').wrap('<div id="AboutSlider"></div>');

    $('#AboutSlider').css({
       'width':'640px',
       'overflow':'hidden',
       'position':'relative',
       'height':'400px'
    });

    $('#AboutSlider .container').css({
        'width':itemCount*itemWidth+'px', 
        'position':'absolute', 
        'height':'400px'
    });

    $('.container .aboutContent').css({
        'padding-left':'0px'
    });

    $('#AboutSlider .aboutContent').css({
        'width':'640px', 
        'float':'left', 
        'min-height':'400px'
    });

    $('#AboutNav a').click(function(event) {
        event.preventDefault();

        var integer = $(this).attr("rel");

        $('#AboutSlider .container').animate({
            left: -640 * (parseInt(integer) - 1)
        })

        $('#AboutNav a').each(function() {
            $(this).removeClass('active');
            if ($(this).hasClass('button' + integer)) {
                $(this).addClass('active')
            }
       });

    });

});

and here the html of the slider:

<div id="Dienstleistungen">
                        <div class="left_column">
                        <h2>Meine Dienstleistungen</h2>
                        <h3>KOMPETENZEN</h3>
                        <ul id="AboutNav">
                            <li><h1><a href="#Kompetenzen" class="button1 active noScroll" rel="1" title="Frontend Entwicklung | Sebastian B&ouml;hme">&Uuml;berblick</a></h1></li>
                            <li><h1><a href="#Frontend" class="button2 noScroll" rel="2" title="Frontend Entwicklung | Sebastian B&ouml;hme">Frontend Entwicklung</a></h1></li>
                            <li><h1><a href="#CMS" class="button3 noScroll" rel="3" title="Content Management Systeme &amp; Online Shops | Sebastian B&ouml;hme">Content Management Systeme &amp; Online Shops</a></h1></li>
                            <li><h1><a href="#SEO" class="button4 noScroll" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian B&ouml;hme">Suchmaschinenoptimierung (SEO)</a></h1></li>
                            <li><h1><a href="#ScreenDesign" class="button5 noScroll" rel="5" title="Screen Design | Sebastian B&ouml;hme">Screen Design</a></h1></li>
                            <li><h1><a href="#Hand" class="button6 noScroll" rel="6" title="Alles aus einer Hand | Sebastian B&ouml;hme">Alles aus einer Hand</a></h1></li>
                        </ul>
                        </div>

                        <div class="container">

                        <div id="Kompetenzen" class="aboutContent right_columns">
                            <h1>&Uuml;berblick</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="Frontend" class="aboutContent right_column ">
                            <h1>Frontend Entwicklung</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />  
                        <div id="CMS" class="aboutContent right_开发者_开发百科column ">
                            <h1>Content Management Systeme &amp; Online Shops</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="SEO" class="aboutContent right_column ">
                            <h1>Suchmaschinenoptimierung (SEO)</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="ScreenDesign" class="aboutContent right_column ">
                            <h1>Screen Design</h1>
                            <p>Phasellus..</p>
                        </div>
                    <hr />
                        <div id="Hand" class="aboutContent right_column">
                            <h1>Alles aus einer Hand</h1>
                            <p>Curabitur..</p>
                        </div>
                        </div><!-- AboutSlider -->
                    </div><!-- Dienstleistungen -->

---

use: $(this).attr('href',$(this).attr('href')+'attachedContent');

---

window.location.hash = 'someValue'

This will add (or change) the value after the # in the URL to someValue.

---

Ok, I used now a combination of your suggestions. It seems to work now how I wanted it. BUT it does so just in Firefox, if I try Chrome it alters the url, the slider works, but the screen jumps up to the top of the slider container.. Any further suggestions?

Here is the current jquery:

$(document).ready(function (){

var itemCount = $('.container div').size();
var itemWidth = $('.container div').width();


$('.container').wrap('<div id="AboutSlider"></div>');

$('#AboutSlider').css({'width':'640px', 'overflow':'hidden', 'position':'relative', 'height':'400px'});

$('#AboutSlider .container').css({'width':itemCount*itemWidth+'px', 'position':'absolute', 'height':'400px'});

$('.container .aboutContent').css({'padding-left':'0px'});

$('#AboutSlider .aboutContent').css({'width':'640px', 'float':'left', 'min-height':'400px'});


$('#AboutNav a').click(function(event) {


event.preventDefault();

$(this).attr('href',$(this).attr('href')+' ');

var integer = $(this).attr("rel");

$('#AboutSlider .container').animate({
    left: -640 * (parseInt(integer) - 1)
})

$('#AboutNav a').each(function() {
    $(this).removeClass('active');
    if ($(this).hasClass('button' + integer)) {
        $(this).addClass('active')
    }
});
document.location.hash = $(this).attr("href");
});

});