Wrong scroll to anchor with owl-carousel before anchor section
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I use this script to scroll down to a certain anchor when page is loaded:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
});
Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.
I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?
Thanks so much in advance!
javascript jquery owl-carousel
asked Nov 22 '18 at 15:23
DFDDFD
228
add a comment |
I use this script to scroll down to a certain anchor when page is loaded:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
});
Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.
I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?
Thanks so much in advance!
javascript jquery owl-carousel
asked Nov 22 '18 at 15:23
DFDDFD
228
add a comment |
I use this script to scroll down to a certain anchor when page is loaded:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
});
Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.
I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?
Thanks so much in advance!
javascript jquery owl-carousel
asked Nov 22 '18 at 15:23
DFDDFD
228
I use this script to scroll down to a certain anchor when page is loaded:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
});
Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.
I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?
Thanks so much in advance!
javascript jquery owl-carousel
javascript jquery owl-carousel
asked Nov 22 '18 at 15:23
DFDDFD
228
asked Nov 22 '18 at 15:23
DFDDFD
228
asked Nov 22 '18 at 15:23
DFDDFD
228
asked Nov 22 '18 at 15:23
DFDDFD
228
asked Nov 22 '18 at 15:23
DFDDFD
228
228
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
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%2f53434062%2fwrong-scroll-to-anchor-with-owl-carousel-before-anchor-section%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
The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
add a comment |
The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
add a comment |
The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
answered Nov 22 '18 at 15:57
stillatmylinuxstillatmylinux
792718
792718
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
add a comment |
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
Thanks, that's work fine!
– DFD
Nov 23 '18 at 7:59
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
I've also tested it with timeout to 0 and seems works to, I don't know why.
– DFD
Nov 23 '18 at 8:08
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%2f53434062%2fwrong-scroll-to-anchor-with-owl-carousel-before-anchor-section%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
