This scrollTop function bugs out when I'm not on top of page and clicks any other A link
Problem:
I have links that looks like this:
<li><a href="#Cars">Bilar</a></li>
<li><a href="#Contact">Kontakt</a></li>
<li><a href="#AboutUs">Om oss</a></li>
in my Layout, and in my Index page I have divs with those Id's that i want to scroll to on click.
It works initially, that will say the first time I click, if I click the same link again it goes to the top, if I click on another link in the navbar while not on the top of the page, it bugs out and can scroll to any div or maybe stay, it's different each click.
How could this happen to me?
I've made my mistakes
$("a").on('click', function(event)
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "")
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate(
scrollTop: $(hash).offset().top
, 800, function()
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
);
// End if
);
javascript jquery .net model-view-controller scrolltop
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
add a comment |
Problem:
I have links that looks like this:
<li><a href="#Cars">Bilar</a></li>
<li><a href="#Contact">Kontakt</a></li>
<li><a href="#AboutUs">Om oss</a></li>
in my Layout, and in my Index page I have divs with those Id's that i want to scroll to on click.
It works initially, that will say the first time I click, if I click the same link again it goes to the top, if I click on another link in the navbar while not on the top of the page, it bugs out and can scroll to any div or maybe stay, it's different each click.
How could this happen to me?
I've made my mistakes
$("a").on('click', function(event)
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "")
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate(
scrollTop: $(hash).offset().top
, 800, function()
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
);
// End if
);
javascript jquery .net model-view-controller scrolltop
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
Can you provide fiddle or example to reproduce the issue? I tried to reproduce on my own and what I got isCannot read property 'top' of undefinedwhen clicking the anchor links.
– Tetsuya Yamamoto
Nov 13 '18 at 2:57
add a comment |
Problem:
I have links that looks like this:
<li><a href="#Cars">Bilar</a></li>
<li><a href="#Contact">Kontakt</a></li>
<li><a href="#AboutUs">Om oss</a></li>
in my Layout, and in my Index page I have divs with those Id's that i want to scroll to on click.
It works initially, that will say the first time I click, if I click the same link again it goes to the top, if I click on another link in the navbar while not on the top of the page, it bugs out and can scroll to any div or maybe stay, it's different each click.
How could this happen to me?
I've made my mistakes
$("a").on('click', function(event)
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "")
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate(
scrollTop: $(hash).offset().top
, 800, function()
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
);
// End if
);
javascript jquery .net model-view-controller scrolltop
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
Problem:
I have links that looks like this:
<li><a href="#Cars">Bilar</a></li>
<li><a href="#Contact">Kontakt</a></li>
<li><a href="#AboutUs">Om oss</a></li>
in my Layout, and in my Index page I have divs with those Id's that i want to scroll to on click.
It works initially, that will say the first time I click, if I click the same link again it goes to the top, if I click on another link in the navbar while not on the top of the page, it bugs out and can scroll to any div or maybe stay, it's different each click.
How could this happen to me?
I've made my mistakes
$("a").on('click', function(event)
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "")
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate(
scrollTop: $(hash).offset().top
, 800, function()
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
);
// End if
);
javascript jquery .net model-view-controller scrolltop
javascript jquery .net model-view-controller scrolltop
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
asked Nov 12 '18 at 15:24
CharlieCharlie
1409
1409
Can you provide fiddle or example to reproduce the issue? I tried to reproduce on my own and what I got isCannot read property 'top' of undefinedwhen clicking the anchor links.
– Tetsuya Yamamoto
Nov 13 '18 at 2:57
add a comment |
Can you provide fiddle or example to reproduce the issue? I tried to reproduce on my own and what I got isCannot read property 'top' of undefinedwhen clicking the anchor links.
– Tetsuya Yamamoto
Nov 13 '18 at 2:57
Can you provide fiddle or example to reproduce the issue? I tried to reproduce on my own and what I got is
Cannot read property 'top' of undefined when clicking the anchor links.– Tetsuya Yamamoto
Nov 13 '18 at 2:57
Can you provide fiddle or example to reproduce the issue? I tried to reproduce on my own and what I got is
Cannot read property 'top' of undefined when clicking the anchor links.– Tetsuya Yamamoto
Nov 13 '18 at 2:57
add a comment |
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%2f53265221%2fthis-scrolltop-function-bugs-out-when-im-not-on-top-of-page-and-clicks-any-othe%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%2f53265221%2fthis-scrolltop-function-bugs-out-when-im-not-on-top-of-page-and-clicks-any-othe%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
Can you provide fiddle or example to reproduce the issue? I tried to reproduce on my own and what I got is
Cannot read property 'top' of undefinedwhen clicking the anchor links.– Tetsuya Yamamoto
Nov 13 '18 at 2:57