I'm using this function to scroll down the page from one element to another. Everything works fine, except that with this function, it scrolls to halfway down the div, instead of just scrolling to the top of the div. How can I fix this?
jQuery(document).ready(function () {
jQuery('.request-tour-scroll').click(function () {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, 2000, function () {
jQuery('#show').focus();
});
jQuery('#tour-option-section').css('display', '');
return false;
});
});
Your scrollTop call needs to have the scroll position set to the top of the div you want to scroll to, not the height of the document.
jQuery("html, body").animate({ scrollTop: $('#tour-option-section').offset().top }, 2000, function () {
jQuery('#show').focus();
});
Codepen for example: https://codepen.io/jamiecalder/pen/LYYVqqX
Related
I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?
For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});
I am trying to scroll my page (on click) to the top of en element. The problem here is that my page is to short to scroll to the top of the element. IS this possible?
Here's my code
$('.x-class').on('click', function(e) {
moveWindowTo($('.yclass').eq(0));
});
function moveWindowTo($target) {
$('body,html').animate({ scrollTop: $target.offset().top }, 'slow');
}
This code uses .parent() to scroll up to the top of the containing div:
$('.x-class').on('click', function(e) {
moveWindowTo($(this).eq(0));
});
function moveWindowTo(target) {
$('body,html').animate({
scrollTop: target.parent().offset().top
}, 'slow');
}
Here is a working jsFiddle. Scrolling down and clicking the red box will scroll it to the top of the containing div.
i have expandable headings that when clicked, show content.
I use a scrollTo method to scroll to the current clicked div to make sure its always in the screen view without the user scrolling.
However, where i currently use fadeIn / Out it looks messy as items are being faded in / out at the same time the page scrolling.
Is there a way i can only fade in / out the content when the scrollTo Has finished? e.g.:
Currently:
$(document).on('click','.headingHelp',function(){
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
However what i want:
function scrollToDiv() {
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
}
$(document).on('click','.headingHelp',function(){
scrollToDiv() {
// ONLY DO THIS ONCE FINISHED SCROLLING
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
}
});
You can use a callback:
$('html,body').animate({scrollTop: $(this).offset().top},'slow',function(){
//all the code you want to execute later goes here
});
If I recall correctly, you can make use of animate's promise:
function scrollToDiv() {
return $('html,body')
.animate({ scrollTop: $(this).offset().top }, 'slow').promise();
}
Use it like this:
scrollToDiv().done(function(){
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
I'm looking for a code that scrolls up to the top of the currently active panel heading of my bootstrap 3 html/css accordion. The closest solution I've found on stackoverflow is the snippet of js below.
This snippet works fairly well, but when a panel heading gets clicked the page scrolls such that the very top of the panel content is flush with the top of the screen. Is there a way to modify this so that the scrolling effect will result in the panel "heading" (as opposed to the top of panel content area) being visible at the top of the screen?
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset)$('html,body').scrollTop(offset.top); }); });
Let me know if I should be sharing the bootstrap accordion html as well.
I used this and it works fine you can adjust the -20 after the .offset().top if you need to tweak it up or down a little.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-title a').offset().top -20
}, 500);
}
});
});
This is to target the specific .panel-heading clicked as per James Wilson's comment on the accepted answer.
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -20
}, 500);
}
});
});
All I changed from gigelsmith's accepted answer is 'var offset' and the scrollTop's target.
I couldn't get the answer above to work, perhaps I'm missing something but I can't see how the scrollTop line above relates to the currently opened accordion item so used the following code instead. Hope it helps someone else:
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
}, 500);
}
});
});
Always animate looks a bit too much so this is my version to only do the job when heading is over the visible part.
(note that I use a data-accordion-focus to apply the fix)
$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
var visibleTop = $(window).scrollTop();
if (headingTop < visibleTop) {
$('html,body').animate({
scrollTop: headingTop
}, 500);
}
});
By using .panel-default as selector of .on(), you can scroll to the active panel.
$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 500);
});
I have a project where the logo will load in the center of the page when the user comes to the website. Then, if the user scrolls down, the logo will scroll to the top and the content will follow, but, the logo will become fixed on top once it reaches top of the window. So, what I want to do is, stop the content from going to the top (because that content goes behind the logo), e.g. #Furniture is the div, that goes to top when an anchor tag with href"#Furniture" is clicked. I want to stop the div containing #Furniture at 150px (logo's height) from top of the browser. Is that possible?
Following is the code that I have used for smooth scrolling of any div to the top:
$(window).load(function () {
var $root = $('html, body');
$('a').click(function () {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
});
Fiddle
Use like this:
var top_val = $(href).offset().top; // or anything your code for getting top value
$root.animate({
top: "+top_val+"
}, 500, function () {
window.location.hash = href;
});