Bootstrap accordion scroll to top of active panel heading - javascript

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);
});

Related

jQuery scroll function is scrolling past top of div with element id

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

jQuery Links have to be clicked twice to scroll

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();
});
});

backtotop.js bug: box is always visible in Firefox 29

// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com
Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.

On click buttons Scroll Div top of the window With increase height

In Demo 01 You can see the Div is Scrolling top of the page with increase height. And I need the same animation with click Buttons, like in Demo 02.
$('.work-showcase').click(function(){
$('.work-showcase').animate({height:'135px'}, 500);
$(this).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(this).offset().top });
});
});
Not sure if I understand what you want, but see if this Javascript works for you:
var map = {
"slice1": "#post1",
"slice2": "#post2",
"slice3": "#post3",
}
$('.clickable').click(function(){
var postId = map[$(this).attr('id')];
$('.post').animate({height:'50px'}, 500);
$(postId).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(postId).offset().top });
});
});
See demo at http://jsfiddle.net/xCKPW/1/.
What I think you want to do is have the animation and size change that you currently have get triggered when a button is clicked.
I also suspect you want the action to occur when the image is clicked.
In this case, move the animations into a separate function, and call that function onclick.
Here's your jsfiddle updated with buttons.
http://jsfiddle.net/Jq4Vw/132/
$('.work-showcase, button').click(function(){
moveAndResize($(this).index());
});
function moveAndResize(index){
var item = $('.work-showcase:eq('+index+')');
$('.work-showcase').animate({height:'135px'}, 500);
$(item).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(item).offset().top });
});
}
This works as long as the indexes are the same. If you want the index of the buttons to be different, add an id tag or something else that you can then pass to the moveAndResize which maps to the index of the item you want to change.

Activating two jQuery functions with one link

I'm trying to do the following:
Open a div with slideToggle
Move the users window to the top of the div with scrollTop
Then basically reverse the process when the user closes the div.
I have the whole process almost finished, but I am having one problem. When I open the div my window doesn't move to the top of the div. But when I close the div my window does move to where I want it.
Here is my jQuery code:
// Find the location of a div (x, y)
function divLoc(object) {
var topCord = 0;
// If browser supports offsetParent
if(object.offsetParent) {
do {
topCord += object.offsetHeight;
}
while (object === object.offsetParent);
return topCord;
}
}
$("#open").click(function () {
var newInfo = document.getElementById("newInfo");
var location = divLoc(newInfo);
$("#newInfo").slideToggle('slow', function() {
$('html,body').animate({ scrollTop: location }, 2000);
});
});
And I uploaded an example of the problem on jsFiddle: Here
You need change slide function:
$("#newInfo").slideToggle('slow', function() {
var self = $(this)
$('html,body').animate({ scrollTop: self.offset().top }, 2000);
});
http://jsfiddle.net/hSHz5/

Categories