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>javascript jquery html
edited Nov 26 '18 at 23:42
miken32
23.9k84972
asked Nov 26 '18 at 21:11
bevstar7bevstar7
186
|
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.
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>javascript jquery html
edited Nov 26 '18 at 23:42
miken32
23.9k84972
asked Nov 26 '18 at 21:11
bevstar7bevstar7
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 athen 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.
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>javascript jquery html
edited Nov 26 '18 at 23:42
miken32
23.9k84972
asked Nov 26 '18 at 21:11
bevstar7bevstar7
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.
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>$(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
javascript jquery html
edited Nov 26 '18 at 23:42
miken32
23.9k84972
asked Nov 26 '18 at 21:11
bevstar7bevstar7
186
edited Nov 26 '18 at 23:42
miken32
23.9k84972
asked Nov 26 '18 at 21:11
bevstar7bevstar7
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
23.9k84972
asked Nov 26 '18 at 21:11
bevstar7bevstar7
186
asked Nov 26 '18 at 21:11
bevstar7bevstar7
186
asked Nov 26 '18 at 21:11
bevstar7bevstar7
186
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 athen 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 athen 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
2
2
why do you feel that this is a "php" question?
– Funk Forty Niner
Nov 26 '18 at 21:12
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
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
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
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
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 athen 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