jQuery - PHP - link href to other page ID not working

I have a PHP site, with a nav that has links to ID's (sections) on the home page. When you click on the link it scrolls down to that section, and everything works how it's supposed to.

However, the nav also has links to other pages, and if you aren't on the home page, and you click on one of these ID hrefs, it doesn't scroll down to that section, it just goes to the top of the homepage.

I tried adding home.php#idname or ./#idname in the href, but neither seem to work. I'm guessing that I might need to get the baseUrl and add that to the href somehow, but I'm not sure. My Javascript/jQuery isn't the best.

How do I make the ID links go and scroll to the desired section, when you're on another page? I've looked up tons of related topics, and nothing seems to be working.

Below is my code:

$(document).ready(function() {



$('#navm li a').click(function(e) {



  var href = $(this).attr('href');



  var autoScrollPosition = parseInt($(href).offset().top - $('#header').outerHeight());



  if (window.location.hash) {



    $(scrollCheck).stop().animate({

      scrollTop: autoScrollPosition

    }, {

      duration: 750,

      easing: 'easeInOutExpo',

      queue: false,

      complete: function() {

        setTimeout(function() {

          enable_scroll();

        }, 50);

      }

    });



  }



});



});

<div id="navm">

  <ul>

    <li><a href="#description" rel="nofollow">Description</a></li>

    <li><a href="#specification" rel="nofollow">Specification</a></li>

    <li><a href="#downloads" rel="nofollow">Downloads</a></li>

    <li class="insight">Insights<span></span>

      <ul class="articles-nav">

        <li><a href="insights/">Article 1</a></li>

      </ul>

    </li>

  </ul>

</div>



<div id="description"></div>



<div id="specification"></div>



<div id="downloads"></div>

edited Nov 26 '18 at 23:42

miken32

23.9k84972

asked Nov 26 '18 at 21:11

bevstar7

186

2

why do you feel that this is a "php" question?

– Funk Forty Niner
Nov 26 '18 at 21:12

Because it's a php site, and all the pages are set up like: page_home.php etc. So I thought maybe the code inside the href will need to be called differently.

– bevstar7
Nov 26 '18 at 21:15

Dont bind to #navm li a then but rather a class

– Lawrence Cherone
Nov 26 '18 at 21:17

Sounds like you want to be running your Javascript code (or a slight variation of it) on page load, as well as on nav click. That way you handle the case of navigating to a different page, not just a different section on the same page.

– Patrick Q
Nov 26 '18 at 21:33

Ok. I should've said I have my jQuery code inside of $(document).ready. I've updated my code. I'll try on page load too. Thanks

– bevstar7
Nov 26 '18 at 22:09

|
show 3 more comments

I have a PHP site, with a nav that has links to ID's (sections) on the home page. When you click on the link it scrolls down to that section, and everything works how it's supposed to.

How do I make the ID links go and scroll to the desired section, when you're on another page? I've looked up tons of related topics, and nothing seems to be working.

Below is my code:

$(document).ready(function() {



$('#navm li a').click(function(e) {



  var href = $(this).attr('href');



  var autoScrollPosition = parseInt($(href).offset().top - $('#header').outerHeight());



  if (window.location.hash) {



    $(scrollCheck).stop().animate({

      scrollTop: autoScrollPosition

    }, {

      duration: 750,

      easing: 'easeInOutExpo',

      queue: false,

      complete: function() {

        setTimeout(function() {

          enable_scroll();

        }, 50);

      }

    });



  }



});



});

<div id="navm">

  <ul>

    <li><a href="#description" rel="nofollow">Description</a></li>

    <li><a href="#specification" rel="nofollow">Specification</a></li>

    <li><a href="#downloads" rel="nofollow">Downloads</a></li>

    <li class="insight">Insights<span></span>

      <ul class="articles-nav">

        <li><a href="insights/">Article 1</a></li>

      </ul>

    </li>

  </ul>

</div>



<div id="description"></div>



<div id="specification"></div>



<div id="downloads"></div>

edited Nov 26 '18 at 23:42

miken32

23.9k84972

asked Nov 26 '18 at 21:11

bevstar7

186

2

why do you feel that this is a "php" question?

– Funk Forty Niner
Nov 26 '18 at 21:12

Because it's a php site, and all the pages are set up like: page_home.php etc. So I thought maybe the code inside the href will need to be called differently.

– bevstar7
Nov 26 '18 at 21:15

Dont bind to #navm li a then but rather a class

– Lawrence Cherone
Nov 26 '18 at 21:17

Sounds like you want to be running your Javascript code (or a slight variation of it) on page load, as well as on nav click. That way you handle the case of navigating to a different page, not just a different section on the same page.

– Patrick Q
Nov 26 '18 at 21:33

Ok. I should've said I have my jQuery code inside of $(document).ready. I've updated my code. I'll try on page load too. Thanks

– bevstar7
Nov 26 '18 at 22:09

|
show 3 more comments

I have a PHP site, with a nav that has links to ID's (sections) on the home page. When you click on the link it scrolls down to that section, and everything works how it's supposed to.

How do I make the ID links go and scroll to the desired section, when you're on another page? I've looked up tons of related topics, and nothing seems to be working.

Below is my code:

$(document).ready(function() {



$('#navm li a').click(function(e) {



  var href = $(this).attr('href');



  var autoScrollPosition = parseInt($(href).offset().top - $('#header').outerHeight());



  if (window.location.hash) {



    $(scrollCheck).stop().animate({

      scrollTop: autoScrollPosition

    }, {

      duration: 750,

      easing: 'easeInOutExpo',

      queue: false,

      complete: function() {

        setTimeout(function() {

          enable_scroll();

        }, 50);

      }

    });



  }



});



});

<div id="navm">

  <ul>

    <li><a href="#description" rel="nofollow">Description</a></li>

    <li><a href="#specification" rel="nofollow">Specification</a></li>

    <li><a href="#downloads" rel="nofollow">Downloads</a></li>

    <li class="insight">Insights<span></span>

      <ul class="articles-nav">

        <li><a href="insights/">Article 1</a></li>

      </ul>

    </li>

  </ul>

</div>



<div id="description"></div>



<div id="specification"></div>



<div id="downloads"></div>

edited Nov 26 '18 at 23:42

miken32

23.9k84972

asked Nov 26 '18 at 21:11

bevstar7

186

I have a PHP site, with a nav that has links to ID's (sections) on the home page. When you click on the link it scrolls down to that section, and everything works how it's supposed to.

How do I make the ID links go and scroll to the desired section, when you're on another page? I've looked up tons of related topics, and nothing seems to be working.

Below is my code:

$(document).ready(function() {



$('#navm li a').click(function(e) {



  var href = $(this).attr('href');



  var autoScrollPosition = parseInt($(href).offset().top - $('#header').outerHeight());



  if (window.location.hash) {



    $(scrollCheck).stop().animate({

      scrollTop: autoScrollPosition

    }, {

      duration: 750,

      easing: 'easeInOutExpo',

      queue: false,

      complete: function() {

        setTimeout(function() {

          enable_scroll();

        }, 50);

      }

    });



  }



});



});

<div id="navm">

  <ul>

    <li><a href="#description" rel="nofollow">Description</a></li>

    <li><a href="#specification" rel="nofollow">Specification</a></li>

    <li><a href="#downloads" rel="nofollow">Downloads</a></li>

    <li class="insight">Insights<span></span>

      <ul class="articles-nav">

        <li><a href="insights/">Article 1</a></li>

      </ul>

    </li>

  </ul>

</div>



<div id="description"></div>



<div id="specification"></div>



<div id="downloads"></div>

$(document).ready(function() {



$('#navm li a').click(function(e) {



  var href = $(this).attr('href');



  var autoScrollPosition = parseInt($(href).offset().top - $('#header').outerHeight());



  if (window.location.hash) {



    $(scrollCheck).stop().animate({

      scrollTop: autoScrollPosition

    }, {

      duration: 750,

      easing: 'easeInOutExpo',

      queue: false,

      complete: function() {

        setTimeout(function() {

          enable_scroll();

        }, 50);

      }

    });



  }



});



});

<div id="navm">

  <ul>

    <li><a href="#description" rel="nofollow">Description</a></li>

    <li><a href="#specification" rel="nofollow">Specification</a></li>

    <li><a href="#downloads" rel="nofollow">Downloads</a></li>

    <li class="insight">Insights<span></span>

      <ul class="articles-nav">

        <li><a href="insights/">Article 1</a></li>

      </ul>

    </li>

  </ul>

</div>



<div id="description"></div>



<div id="specification"></div>



<div id="downloads"></div>

$(document).ready(function() {



$('#navm li a').click(function(e) {



  var href = $(this).attr('href');



  var autoScrollPosition = parseInt($(href).offset().top - $('#header').outerHeight());



  if (window.location.hash) {



    $(scrollCheck).stop().animate({

      scrollTop: autoScrollPosition

    }, {

      duration: 750,

      easing: 'easeInOutExpo',

      queue: false,

      complete: function() {

        setTimeout(function() {

          enable_scroll();

        }, 50);

      }

    });



  }



});



});

<div id="navm">

  <ul>

    <li><a href="#description" rel="nofollow">Description</a></li>

    <li><a href="#specification" rel="nofollow">Specification</a></li>

    <li><a href="#downloads" rel="nofollow">Downloads</a></li>

    <li class="insight">Insights<span></span>

      <ul class="articles-nav">

        <li><a href="insights/">Article 1</a></li>

      </ul>

    </li>

  </ul>

</div>



<div id="description"></div>



<div id="specification"></div>



<div id="downloads"></div>

javascript jquery html

edited Nov 26 '18 at 23:42

miken32

23.9k84972

asked Nov 26 '18 at 21:11

bevstar7

186

edited Nov 26 '18 at 23:42

miken32

23.9k84972

asked Nov 26 '18 at 21:11

bevstar7

186

edited Nov 26 '18 at 23:42

miken32

23.9k84972

edited Nov 26 '18 at 23:42

miken32

23.9k84972

edited Nov 26 '18 at 23:42

miken32

23.9k84972

asked Nov 26 '18 at 21:11

bevstar7

186

asked Nov 26 '18 at 21:11

bevstar7

186

asked Nov 26 '18 at 21:11

bevstar7

186

2

why do you feel that this is a "php" question?

– Funk Forty Niner
Nov 26 '18 at 21:12

Because it's a php site, and all the pages are set up like: page_home.php etc. So I thought maybe the code inside the href will need to be called differently.

– bevstar7
Nov 26 '18 at 21:15

Dont bind to #navm li a then but rather a class

– Lawrence Cherone
Nov 26 '18 at 21:17

Sounds like you want to be running your Javascript code (or a slight variation of it) on page load, as well as on nav click. That way you handle the case of navigating to a different page, not just a different section on the same page.

– Patrick Q
Nov 26 '18 at 21:33

Ok. I should've said I have my jQuery code inside of $(document).ready. I've updated my code. I'll try on page load too. Thanks

– bevstar7
Nov 26 '18 at 22:09

|
show 3 more comments

2

why do you feel that this is a "php" question?

– Funk Forty Niner
Nov 26 '18 at 21:12

Because it's a php site, and all the pages are set up like: page_home.php etc. So I thought maybe the code inside the href will need to be called differently.

– bevstar7
Nov 26 '18 at 21:15

Dont bind to #navm li a then but rather a class

– Lawrence Cherone
Nov 26 '18 at 21:17

Sounds like you want to be running your Javascript code (or a slight variation of it) on page load, as well as on nav click. That way you handle the case of navigating to a different page, not just a different section on the same page.

– Patrick Q
Nov 26 '18 at 21:33

Ok. I should've said I have my jQuery code inside of $(document).ready. I've updated my code. I'll try on page load too. Thanks

– bevstar7
Nov 26 '18 at 22:09

why do you feel that this is a "php" question?

– Funk Forty Niner
Nov 26 '18 at 21:12

Because it's a php site, and all the pages are set up like: page_home.php etc. So I thought maybe the code inside the href will need to be called differently.

– bevstar7
Nov 26 '18 at 21:15

Dont bind to #navm li a then but rather a class

– Lawrence Cherone
Nov 26 '18 at 21:17

Sounds like you want to be running your Javascript code (or a slight variation of it) on page load, as well as on nav click. That way you handle the case of navigating to a different page, not just a different section on the same page.

– Patrick Q
Nov 26 '18 at 21:33

Ok. I should've said I have my jQuery code inside of $(document).ready. I've updated my code. I'll try on page load too. Thanks

– bevstar7
Nov 26 '18 at 22:09

|
show 3 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53489128%2fjquery-php-link-href-to-other-page-id-not-working%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl