javascript - Remove/avoid adding target link to URL -


this 1 may simple jquery/javascript gurus here, can't find solution around web.

case

i have link @ bottom of page says back top, link target link this:

<a href="#top" class="standard">back top</a> 

so when click it, jumps top of page. simple.

problem

when target link clicked, id #top added url of page, ie:

http://website.com/about-us/#top 

question

is there way remove or avoid getting id #top added url of page retain functionality of page jumping top?

any appreciated.

in either case (jquery or vanilla javascript), you'll want following:

  • select anchor tags href set #top
  • create "jump" function sets page position top , returns false prevent default link behavior
  • bind "jump" function click event of of nodes found

to jump have several options. i've provided them (jquery , js specific) in first example below.

using jquery

jquery makes selecting , binding click event easy. can jump top of page using jquery or straight javascript.

$('a[href="#top"]').click(function() {     //    // jump, pick one...    //     // vanilla js jump    window.scroll(0,0)     // vanilla js jump    window.scrollto(0,0)     // jquery jump    $('html,body').scrolltop(0);     // fancy jquery animated scrolling     $('html,body').animate({ scrolltop: 0 }, 'slow');     //    // ...then prevent default behavior returning false.    //     return false;  }); 

jquery's animate provides options animation duration , easing along ability set callback.

vanilla javascript

you can use vanilla js whole way through... querying , binding, however, become bit more painful.

modern browsers support document.queryselectorall() allow grab of link elements jquery:

var links = document.queryselectorall('a[href="#top"]'); 

then loop on elements , bind "jump":

for (var = links.length - 1; >= 0; i--) {   links[i].onclick = function() { window.scroll(); return false; }; }; 

if target browser doesn't gift queryselectorall loop through of anchor tags find ones linked #top:

var links = document.body.getelementsbytagname('a'); (var = links.length - 1; >= 0; i--) {   var l = links[i];   if(l.getattribute('href') === '#top') {     l.onclick = function() { window.scroll(); return false; }   } } 

Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -