how to navigate from a link in one page to another page in between in jquery

Question

I want to navigate from home page to in between getinvloved page. In Home page, i have a link something like this:

<a href="getinvolved/#voluntours" data-toggle="" data-target="" 
                                  target="" class="button">Voluntours</a>
<a href="getinvolved/#dreamcourts" data-toggle="" data-target="" 
                                 target="" class="button">Dreamcourts</a>

In getinvolved page, i want to navigate to below <div> - this is in between the page:

<div id="voluntours" class="volunteer-days" style="padding-top: 25px;">
<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
</div>

<div id="dreamcourts" class="volunteer-days" style="padding-top: 25px;">
<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
</div>

When i click from home page link i should navigate to respective "id"s in getinvolved page

Example :

If i click on Voluntours from home page then it should point to id="voluntours" in getinvolved page

<--Jquery -->

if(window.location.href.indexOf("getinvolved")) { 
if(window.location.href.indexOf("#") > -1) {
var id = window.location.href.substr(window.location.href.lastIndexOf("#"));
var ofs = 0; 
var isNavMobile = false;

if ($(window).width() < 1025) {
isNavMobile = true;
if(id.indexOf("volunteer") > -1) { 
ofs = $(id).offset().top - 23;
}
else if(id.indexOf("dreamcourts") > -1) {
ofs = $(id).offset().top - 50;
}
else if(id.indexOf("fundraising") > -1){
 ofs = $(id).offset().top - 80;
}
else {
ofs = $(id).offset().top - 100;
}
}
else {
isNavMobile = false;
if(id.indexOf("volunteer") > -1) { 
ofs = $(id).offset().top - 120;
}
else if(id.indexOf("dreamcourts") > -1) {
ofs = $(id).offset().top + 250; 
}
else if(id.indexOf("fundraising") > -1){
 ofs = $(id).offset().top + 250;
}
else {
ofs = $(id).offset().top;
}
}

$('body, html').animate({ scrollTop: ofs });
}
}

<--HTML -->

<a href="getinvolved/#voluntours" data-toggle="" data-target="" target="" class="button">Voluntours</a>
<a href="getinvolved/#dreamcourts" data-toggle="" data-target="" target="" class="button">Dreamcourts</a>




<div id="voluntours" class="volunteer-days" style="padding-top: 25px;">
<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
</div>

<div id="dreamcourts" class="volunteer-days" style="padding-top: 25px;">
<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
</div>

Currently am using offset().top in jQuery to navigate but its

Yes i have used hashtag but its not pointing proper.Since am using jquery offset,its not working as expected. — Siddu Hediginal, Feb 01 '17 at 08:16
You can find your answer in this thread - http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link — Tanasos, Feb 01 '17 at 08:50
Even am using same offset().top for navigation but the value is getting change every time and not positioning properly — Siddu Hediginal, Feb 01 '17 at 11:27
what exactly do you mean by "the value is getting change every time", can we see a real life example? — Victor Radu, Feb 01 '17 at 12:45
I mean, when i provide alert(ofs); from above code, value is getting change every time after page refresh, so some time its pointing properly and sometime not. Plz provide proper solution — Siddu Hediginal, Feb 01 '17 at 13:04

how to navigate from a link in one page to another page in between in jquery

0 Answers0