CODEWITHSUNDEEP
html
Chris
Chris

Reputation: 25

Removing id attribute to link from my url

For some reason unknown to me the id attribute to link to a section of my webpage gets stuck in the url after clicking on it.

<a href="#second" button class="btn">Click Here To Pre-Order</button></a>

<a id="second"></a>

To see a live example of what I mean you can please visit [plushvip.com1, click on the first button to see what I mean.

Any ideas?

Upvotes: 0

Views: 2990

Answers (3)

Jacob G
Jacob G

Reputation: 14172

#1: That's how it is supposed to work
#2: As noted in the other answer that is called hashes, and you would use jquery to fix it. I like this little script it removes the hashes, and has a nice scroll animation instead of a jump:
JQuery:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event) {
       event.preventDefault();
       $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
    });
});

HTML:

<a href="#second" class="scroll" >
<button class="btn">Click Here To Pre-Order</button>
</a>

Demo:
http://jsfiddle.net/ImagineStudios/c604vbrn/11/

Upvotes: 2

Ram
Ram

Reputation: 144659

That's how hashes work. If you reload the page browser tries to find an element that has the current hash as it's id and focuses on it. If that's not what you want, you should prevent the default action of the click event, then the document's hash won't be updated, but then you should select the target element using JavaScript and change the scroll position of the window according to top offset of the target element.

And your markup is invalid. Where is the opening button tag and why a button element in an a element?

Upvotes: 0

saruftw
saruftw

Reputation: 1164

Try using this snippet. 

<button class="btn"><a href="#bottom">Click Here To Pre-Order</a></button>

<a id="bottom"></a>

Upvotes: 0

Related Questions