Using JQuery UI slider for site navigation - slider acting weird?

Question

I am planning on making a small, personal portfolio site. I wanted to try a different kind of navigation for it - having touch-devices in mind, using the JQuery UI slider instead of usual button-based menus seemed like a good idea.

However, I got stuck pretty fast. This is what I have so far, based on tutorials found over at codrops and hongkiat: http://www.insertdisk2.de/stackoverflow/index.html

EDIT: Thanks to Max, I got the "anchor jumping" covered. Using the slider I can now trigger the CSS transitions and navigate the page. Thanks alot!

The slider still acts weird though - I am planning on having 4 or 5 "states", however it seems to miscalculate the value/position resulting in triggering too early or too late.

$(function() {

        //Store frequently elements in variables
        var slider  = $('#slider'),
            tooltip = $('.tooltip');

        //Hide the Tooltip at first
        tooltip.hide();

        //Call the Slider
        slider.slider({
            //Config
range: "min",
step: 50,
value: 0,

            start: function(event,ui) {
                tooltip.fadeIn('fast');
            },

            //Slider Event
            slide: function(event, ui) { //When the slider is sliding

                var value  = slider.slider('value'),
                    volume = $('.test');

                tooltip.css('right', value).text(ui.value);  //Adjust the tooltip accordingly

                if(value <= 5) { 
                    volume.css('background-color', '#000');
                    window.location.hash = 'home';
                } 
                else if (value == 50) {
                    window.location.hash = 'portfolio';

                } 
                else  {
                    window.location.hash = 'contact';
                };

            },

            stop: function(event,ui) {
                tooltip.fadeOut('fast');
            },
        });

    });
</script> 

I guess it's either the range/value/steps or the way I wrote the conditions that the slider acts so "confused".

Answer 1

If you want the slider to replicate the funcionality of the navigation buttons, you should think about what the buttons do: They change the location, or, more accurately, the fragment after the #. You were already close to the solution when you wanted to change the URL.

In the slide event handler, put

window.location.hash = 'home';

That will change the fragment identifier to home and have the same result as clicking on the Home-Button.