After change location, scroll to element with animation
when I click on <a id="cityAaaHref">Link</a> i want to change location, and scroll with animation to section.
Here is my code
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
window.location = "../aaa#city";
//how to here set animation after location change
}
})
IF statement working exactly how I need
The only problem is with ELSE state, here I change location and show this section, but I want to change location and then show scrolling animation to this section.
I hope you understand. Thnx
jquery
asked Nov 21 '18 at 10:13
ArterArter
415217
add a comment |
when I click on <a id="cityAaaHref">Link</a> i want to change location, and scroll with animation to section.
Here is my code
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
window.location = "../aaa#city";
//how to here set animation after location change
}
})
IF statement working exactly how I need
The only problem is with ELSE state, here I change location and show this section, but I want to change location and then show scrolling animation to this section.
I hope you understand. Thnx
jquery
asked Nov 21 '18 at 10:13
ArterArter
415217
Your code redirect to another page../aaaso you need to put a code in second page that after page load gethashvalue from URL and animate to element has that hash (#city)
– Mohammad
Nov 21 '18 at 10:42
I need to scroll only if I click on this link. If I came to thisaaapage on a regular way, I don't need scroll to any element. How to check if I came from this link or regular way? Thnx @Mohammad
– Arter
Nov 21 '18 at 10:47
When you used#cityat the end of URL, browser automatically scroll to element has idcityafter page load, but you need to add animation to it.
– Mohammad
Nov 21 '18 at 10:50
add a comment |
when I click on <a id="cityAaaHref">Link</a> i want to change location, and scroll with animation to section.
Here is my code
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
window.location = "../aaa#city";
//how to here set animation after location change
}
})
IF statement working exactly how I need
The only problem is with ELSE state, here I change location and show this section, but I want to change location and then show scrolling animation to this section.
I hope you understand. Thnx
jquery
asked Nov 21 '18 at 10:13
ArterArter
415217
when I click on <a id="cityAaaHref">Link</a> i want to change location, and scroll with animation to section.
Here is my code
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
window.location = "../aaa#city";
//how to here set animation after location change
}
})
IF statement working exactly how I need
The only problem is with ELSE state, here I change location and show this section, but I want to change location and then show scrolling animation to this section.
I hope you understand. Thnx
jquery
jquery
asked Nov 21 '18 at 10:13
ArterArter
415217
asked Nov 21 '18 at 10:13
ArterArter
415217
asked Nov 21 '18 at 10:13
ArterArter
415217
asked Nov 21 '18 at 10:13
ArterArter
415217
asked Nov 21 '18 at 10:13
ArterArter
415217
415217
Your code redirect to another page../aaaso you need to put a code in second page that after page load gethashvalue from URL and animate to element has that hash (#city)
– Mohammad
Nov 21 '18 at 10:42
I need to scroll only if I click on this link. If I came to thisaaapage on a regular way, I don't need scroll to any element. How to check if I came from this link or regular way? Thnx @Mohammad
– Arter
Nov 21 '18 at 10:47
When you used#cityat the end of URL, browser automatically scroll to element has idcityafter page load, but you need to add animation to it.
– Mohammad
Nov 21 '18 at 10:50
add a comment |
Your code redirect to another page../aaaso you need to put a code in second page that after page load gethashvalue from URL and animate to element has that hash (#city)
– Mohammad
Nov 21 '18 at 10:42
I need to scroll only if I click on this link. If I came to thisaaapage on a regular way, I don't need scroll to any element. How to check if I came from this link or regular way? Thnx @Mohammad
– Arter
Nov 21 '18 at 10:47
When you used#cityat the end of URL, browser automatically scroll to element has idcityafter page load, but you need to add animation to it.
– Mohammad
Nov 21 '18 at 10:50
Your code redirect to another page
../aaa so you need to put a code in second page that after page load get hash value from URL and animate to element has that hash (#city)– Mohammad
Nov 21 '18 at 10:42
Your code redirect to another page
../aaa so you need to put a code in second page that after page load get hash value from URL and animate to element has that hash (#city)– Mohammad
Nov 21 '18 at 10:42
I need to scroll only if I click on this link. If I came to this
aaa page on a regular way, I don't need scroll to any element. How to check if I came from this link or regular way? Thnx @Mohammad– Arter
Nov 21 '18 at 10:47
I need to scroll only if I click on this link. If I came to this
aaa page on a regular way, I don't need scroll to any element. How to check if I came from this link or regular way? Thnx @Mohammad– Arter
Nov 21 '18 at 10:47
When you used
#city at the end of URL, browser automatically scroll to element has id city after page load, but you need to add animation to it.– Mohammad
Nov 21 '18 at 10:50
When you used
#city at the end of URL, browser automatically scroll to element has id city after page load, but you need to add animation to it.– Mohammad
Nov 21 '18 at 10:50
add a comment |
1 Answer
1
active
oldest
votes
On the aaa page you can do this logic:
$(document).ready(function() {
if (window.location.hash === "#city") {
//do something
}
});
If having a hash of "#city" does not necessarily mean the animation is to be executed, then in your code you can mark the animation as needed into localStorage:
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
localStorage.setItem('aaa', 'animation');
window.location = "../aaa#city";
//how to here set animation after location change
}
});
});
and then at the other page:
$(document).ready(function() {
if (localStorage.getItem('aaa') === 'animation') {
//do something
}
});
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
add a comment |
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%2f53409743%2fafter-change-location-scroll-to-element-with-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
On the aaa page you can do this logic:
$(document).ready(function() {
if (window.location.hash === "#city") {
//do something
}
});
If having a hash of "#city" does not necessarily mean the animation is to be executed, then in your code you can mark the animation as needed into localStorage:
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
localStorage.setItem('aaa', 'animation');
window.location = "../aaa#city";
//how to here set animation after location change
}
});
});
and then at the other page:
$(document).ready(function() {
if (localStorage.getItem('aaa') === 'animation') {
//do something
}
});
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
add a comment |
On the aaa page you can do this logic:
$(document).ready(function() {
if (window.location.hash === "#city") {
//do something
}
});
If having a hash of "#city" does not necessarily mean the animation is to be executed, then in your code you can mark the animation as needed into localStorage:
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
localStorage.setItem('aaa', 'animation');
window.location = "../aaa#city";
//how to here set animation after location change
}
});
});
and then at the other page:
$(document).ready(function() {
if (localStorage.getItem('aaa') === 'animation') {
//do something
}
});
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
add a comment |
On the aaa page you can do this logic:
$(document).ready(function() {
if (window.location.hash === "#city") {
//do something
}
});
If having a hash of "#city" does not necessarily mean the animation is to be executed, then in your code you can mark the animation as needed into localStorage:
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
localStorage.setItem('aaa', 'animation');
window.location = "../aaa#city";
//how to here set animation after location change
}
});
});
and then at the other page:
$(document).ready(function() {
if (localStorage.getItem('aaa') === 'animation') {
//do something
}
});
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
On the aaa page you can do this logic:
$(document).ready(function() {
if (window.location.hash === "#city") {
//do something
}
});
If having a hash of "#city" does not necessarily mean the animation is to be executed, then in your code you can mark the animation as needed into localStorage:
$(document).ready(function () {
$('#cityAaaHref').click(function () {
var selector = $(this).data('selector');
if (window.location.pathname == "/aaa/") {
$('html, body').animate({
scrollTop: $("#" + selector).offset().top
}, 1000);
}else{
localStorage.setItem('aaa', 'animation');
window.location = "../aaa#city";
//how to here set animation after location change
}
});
});
and then at the other page:
$(document).ready(function() {
if (localStorage.getItem('aaa') === 'animation') {
//do something
}
});
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
answered Nov 21 '18 at 10:59
Lajos ArpadLajos Arpad
28.4k1861118
28.4k1861118
add a comment |
add a comment |
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%2f53409743%2fafter-change-location-scroll-to-element-with-animation%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
Your code redirect to another page
../aaaso you need to put a code in second page that after page load gethashvalue from URL and animate to element has that hash (#city)– Mohammad
Nov 21 '18 at 10:42
I need to scroll only if I click on this link. If I came to this
aaapage on a regular way, I don't need scroll to any element. How to check if I came from this link or regular way? Thnx @Mohammad– Arter
Nov 21 '18 at 10:47
When you used
#cityat the end of URL, browser automatically scroll to element has idcityafter page load, but you need to add animation to it.– Mohammad
Nov 21 '18 at 10:50