link a button to a part of another page

Question

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">

Regarding jquery... look here http://stackoverflow.com/questions/9652944/jquery-scroll-to-id-from-different-page — Ilan Kutsman, May 05 '16 at 12:25

score 2 · Answer 1 · answered May 05 '16 at 12:04

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

answered May 05 '16 at 12:04

Ilan Kutsman

469
3
9

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 05 '16 at 12:08
@Ylama it'll work for any page not the same page only, have you even tried his solution?? – Vibhesh Kaul May 05 '16 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 – Ilan Kutsman May 05 '16 at 12:10
1

not necessarily. `name` is not really needed if you have an `id` http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id – BenG May 05 '16 at 12:17

score 1 · Answer 2 · answered May 05 '16 at 11:56

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.

answered May 05 '16 at 11:56

durbnpoisn

4,666
2
16
30

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 05 '16 at 12:00
1

No. It works when bouncing to a different page too. You just have to make sure there is a at that point. Without that named anchor tag, it won't work. – durbnpoisn May 05 '16 at 12:04
not necessarily it could be any element with name property set to "isabelo", The broser will also jump to any element with the id ="isabelo". – Vibhesh Kaul May 05 '16 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 05 '16 at 12:14
`name` is not really needed if you have an `id` http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id – BenG May 05 '16 at 12:19

score 1 · Answer 3 · answered May 05 '16 at 12:21

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.

answered May 05 '16 at 12:21

Shil Nevado

716
1
11
30

aah i like this answer, i didnt think bout the loading. Let me check dude ! shot – Ylama May 05 '16 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 :/ – Shil Nevado May 05 '16 at 12:33
your help was much appreciated! i got the solution ! works fine now.. yeah – Ylama May 05 '16 at 12:34

score 1 · Accepted Answer · answered May 05 '16 at 12:36

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 :)

score 0 · Answer 5 · answered May 05 '16 at 12:52

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);       
  }      
});

cool, thank you for the solution . Will definitely do some research and implement it. — Ylama, May 05 '16 at 13:15

link a button to a part of another page

5 Answers5