2

I have a link button that goes to another page, it works, but i want the link to go to a spicific part of that page. i know i should use jquery for thisand for some reason its not jumping to the section i want it to jump to.

My button link:

 <div class="btn_holder top-slide"><a 
  href="http://testurl.com/media#isabelo"><p class="leeu_button">READ
  MORE</p></a>
 </div>

What i currently have srolls to bottom of page and not to the section where id="isabelo". so this jquery works but its not what i want. hope you understand.

$(document).ready(function(){ 

//check if hash tag exists in the URL
if(window.location.hash) {          
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
    1000);      
}     });

I have also already tried this (not working at all) :

$(document).ready(function(){ 

//check if hash tag exists in the URL
if(window.location.hash) {          
     $('html, body').animate({ scrollTop: $("#isabelo").offset().top }, 1000);      
}
     });

the page im trying to link to has a div with a id="isabelo"

<div class="content_holder terms_row" id="isabelo">
2

5 Answers 5

2
<a href="http://www.example.com/some-page-or-other.html#exactline">Click here</a>

the location you want to jump to should have name="exactline" property

4
  • Thanks, I dont know if you understand, because that sulotion works for a link on the same page to go to another section on that same page, like if i have a link on 'page1' i want it to go to a certain section where id="isabelo on 'page2'.. hope that makes it a bit more clear?
    – Ylama
    May 5, 2016 at 12:08
  • @Ylama it'll work for any page not the same page only, have you even tried his solution?? May 5, 2016 at 12:09
  • it should work for any section within any page whether its local or on some website...not just for the same page May 5, 2016 at 12:10
  • 1
    not necessarily. name is not really needed if you have an id stackoverflow.com/questions/484719/html-anchors-with-name-or-id
    – BenG
    May 5, 2016 at 12:17
1

You shouldn't need jquery for this. You should be able to link to "media/pagename.html#isabelo" with straight HTML. But you are missing the page name. That, and you need to have a NAME tag on there as well as the ID.

5
  • thanks for your answer, i already tried that, it does not work, i think that only works when you trying to link from the same page to another section on that page.
    – Ylama
    May 5, 2016 at 12:00
  • 1
    No. It works when bouncing to a different page too. You just have to make sure there is a <a name="isabelo"> at that point. Without that named anchor tag, it won't work.
    – durbnpoisn
    May 5, 2016 at 12:04
  • not necessarily <a name="isabelo"> it could be any element with name property set to "isabelo", The broser will also jump to any element with the id ="isabelo". May 5, 2016 at 12:05
  • oky thanks, it honestly does not work for me, i used it on the same page to link to another part of that page and it worked so i do not know,and i did research where some 'smart' guy said its only for linking on the same page, but if i use jquery , may i ask for a solution please?
    – Ylama
    May 5, 2016 at 12:14
  • name is not really needed if you have an id stackoverflow.com/questions/484719/html-anchors-with-name-or-id
    – BenG
    May 5, 2016 at 12:19
1

Well I tried that in the same page and it worked. I'm not an expert in jquery but if:

 $("html, body").animate({ scrollTop: $(document).height() }, 1000);

works but with isabelo not, maybe is because the browser hasn't still loaded the html where isabelo is. Try to debug to see if you have that isabelo element in that point or it is not still loaded.

Other different thing I found is that in the first example you put twice the "1000"

$("html, body").animate({ scrollTop: $(document).height() }, 1000); 1000);

in the second not

$('html, body').animate({ scrollTop: $("#isabelo").offset().top }, 1000);

But I supose it was a mistake of copy/paste, because in the first example I don't find the sense of it but it works as u said.

3
  • aah i like this answer, i didnt think bout the loading. Let me check dude ! shot
    – Ylama
    May 5, 2016 at 12:26
  • I can't see all the page. Maybe that element is created after loading by a function. It's just an option :/ May 5, 2016 at 12:33
  • your help was much appreciated! i got the solution ! works fine now.. yeah
    – Ylama
    May 5, 2016 at 12:34
1

My solution to this:

$(document).ready(function(){    
//check if hash tag exists in the URL
if(window.location.hash) {   
setTimeout(function(){
     $('html, body').animate({ scrollTop: $("#isabelo").offset().top },
 1000); 
 },1000);       
  }      
}); 

used the time-out funtion to load it bit later. Solved :)

0

setInterval would be the better way than setTimeout. If your page doesn't load within 1 second then your code within setTimeout won't work as expected. However, if you have an interval for each second and clear the interval once you get that element, this will always work.

$(document).ready(function(){    
//check if hash tag exists in the URL
if(window.location.hash) {   
a = setInterval(function(){
     if($("#isabelo").length) {
       $('html, body').animate({ scrollTop: $("#isabelo").offset().top },
       1000);
       clearInterval(a);
     } 
 },1000);       
  }      
}); 
1
  • 1
    cool, thank you for the solution . Will definitely do some research and implement it.
    – Ylama
    May 5, 2016 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.