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

Post a Comment

Popular posts from this blog

c++ - Linked List error when inserting for the last time -

-
so have part of code here this loop 5 times (max = 5) insert word link list. for ( int = 0 ; < max ; i++ ) { string alphabet = g->returnalphabets(); l[i]->addwords(alphabet[i]); } and have insert word part here string line; fstream myfile ("words.txt"); while (!myfile.eof()) { getline(myfile,line); if ( alphabet == line[0] ) { listnode *newnode = new listnode; if ( head == null ) { newnode->item = alphabet; newnode->next = null; head = newnode; } else { newnode->item = line; prev = cur; prev->next = newnode; } cur = newnode; } } myfile.close(); my problem gives me error on last loop. meaning on max = 4, insert node. rest of loop fine. when decrease max 4 meaning loop 4 times, program error-free when program loops 5 times gives error. anyone can poin...
Read more

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

-
i use sonar plugin executes if activated in maven profile. sonar runs on every compile. the problem build fail other team members not have sonar application installed locally. pom.xml checked in team members same copy including sonar configuration, don't want them modify purpose of disabling sonar (they might inadvertently check modified copy in). please advise how configure maven (.m2/settings.xml) and/or pom.xml sonar feature can enabled/disabled local profile. here sonar configuration in each project's pom.xml: <plugin> <groupid>org.codehaus.mojo</groupid> <artifactid>sonar-maven-plugin</artifactid> <version>1.0</version> <executions> <execution> <id>make-sonar</id> <phase>compile</phase> <goals> <goal>sonar</goal> </goals> </execution> </executions> ...
Read more

tsql - Pivot with Temp Table (definition for column must include data type) -- SQL Server 2008 -

-
the following returning 2 errors: 'the definition column '0.63' must include data type.' 'the select list insert statement contains fewer items insert list. number of select values must match number of insert columns.' i understand need assign data type columns being inserted temp table don't quite understand how dynamic code however. if explanation on how @cols variable code working , specific issue. fldpk data type int , pivot fields i.e. @cols, float data type. declare @cols nvarchar(max), @query nvarchar(max); select @cols = stuff((select distinct ',' + quotename(fldci) fn_qryt_1() xml path(''), type ).value('.', 'nvarchar(max)') ,1,1,'') set @query = 'select fldpk, ' + @cols + ' ( select fldpk ,fldni ...
Read more