Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Paul Roberts
Paul Roberts
7,928 Points

Stop Links Adding to URL

Hey there,

Here is my JSFiddle:

http://jsfiddle.net/3j6yav0q/

The problem is when you click the menu links, they add "#one", "#two", '#three" and "#four" to the end of the URL.

How do I prevent this?

Edit: For a single page website!

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Easy way to remove hash from end of url:

history.pushState("", document.title, window.location.pathname);
Paul Roberts
Paul Roberts
7,928 Points

Hey, thanks for the reply :)

I've tried this but it doesn't work.

I'm designing a single page website, so it needs to work every time someone clicks an INTERNAL link to further down the page.

Jeff Lemay
Jeff Lemay
14,268 Points

Instead of linking to IDs of each section on the page, could you use jquery to handle this (would also give you a nice scroll animation)? Check out links here and here for examples.

The basic idea is:

// whenever we click a link with class link
$(".link").on.('click', function(event) {

// prevent the default action of the link
    event.preventDefault(); 

//Offset of 20px so we have a little margin above the selected section
    var offset = 20; 

// Get the value set in our href, this would be the ID of the div we want to scroll our ID #selector in front
// example of href value would be href="#someDiv"
          target = $(this).attr('href'); 

// Our animation to scroll down to the target div... 1000 = 1 second
    $('html, body').animate({
        scrollTop: $(target).offset().top + offset
    }, 1000);
});