We Keep Coding

Bootstrap Accordion - Page jumps to bottom first then go to top issue

When I click on accordion tab, it goes to bottom of the page due to difference in amount of content and height of the content.
I used this code to send page to top, but its scroll the page to bottom first then animate it to the top, which looks weird.
$('#accordion').on('shown.bs.collapse', function () {
window.elenow = $(this);
$("html, body").animate({ scrollTop: $(window.elenow).offset().top }, 500);
});
I just want to page remain still when click on accordion tab, no go to top no go to bottom, just stay where its clicked.

You can prevent scrolling all together by changing your href to href="javascript:void(0);"
Here is a fiddle that shows the example.

Scroll to div on click (show div on center screen)

I have a question about a tiny JS that I have put at the bottom of the page. The script scrolls to another div when the user clicks on one div. On my website there is a contact button (example below).
<div id="contactbutton"></div>
When the user of the website clicks on this div, the page scrolls down to another div on the page with a contact form on it (example below).
<div id="contactform">
<form>
(form content here)
</form>
</div>
I did that using the following JS code at the bottom of the page, that will scroll to the other div:
<script>
$("#contactbutton").click(function() {
$('html, body').animate({
scrollTop: $("#contactform").offset().top
}, 500);
});
</script>
The code works perfect, but problem is that I have a fixed div header on my website that is on top of everything on the page. When the user scrolls to #contactform, a part of this contact form div is behind this header.
I am looking for a way to scroll to #contactform. But instead of scrolling all the way, I want it to scroll till it's a certain amount of pixels away from the top of the browser window so it will show below the header and not behind it.
I hope somebody can help me out! Thanks alot in advance.
Elmigo

You want to substract the height of your sticky header from the scroll distance, something like this (#fixed-header is an id of your sticky header):
<script>
$("#contactbutton").click(function() {
$('html, body').animate({
scrollTop: $("#contactform").offset().top - $('#fixed-header').outerHeight()
}, 500);
});
</script>

You could substract the height of your header so the scroll will stop a few pixels before your content leaving some spaces for the header
<script>
$("#contactbutton").click(function() {
$('html, body').animate({
scrollTop: $("#contactform").offset().top - $('#header').height()
}, 500);
});
</script>

jQuery jump to element

I've something like an image gallery on my site. By clicking an image this one will scale up. Sometimes the enlargement contains that a part of the image is out of the viewport. Is it possible that the complete site jumps to the top area of the image by clicking it?
You can have a look here!

Try this:
$("div.image img").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
It should create a click event for all the images inside the div element with a class "image", which I can see in your code, and then animate (slowly, in 2000 miliseconds, aka 2 seconds) scroll to it's offset from the top of the page.
You have more information in this 5 year old question on stackoverflow.com
edit:
if you need some adjustment, you can edit this line
scrollTop: $(this).offset().top - 88
and the page will scroll 88px less than the image position, which you could find helpful because of your floating menu.

Scroll down button

I've already created the #scrolldownbutton to scroll to the first component but what I'm initially trying to do is when the button is clicked the page scrolls within the viewport and stops on the partially visible component at the bottom of the view port in which the button should appear at the the top of the visible component and the bottom of the viewport each time the button is clicked.
Here is what I have so far Please if anyone could help this would be amazing.
$(document).ready(function() {
$("#scrollmorebutton").on("click", function() {
console.log("scrollmorebutton was clicked");
//jquery smooth scroll code here
$('html, body').animate({
scrollTop: $("h2:contains('New Programs')").offset().top
}, 2000);
});
});

Might not be anything near what you're asking for as i'm not entirely sure I understand. But here's a fiddle with some example code
https://jsfiddle.net/cf3q2zo9/

Move html & body up to top when img is clicked

I have images that when clicked, resize. However, I would like it so that no matter how far the user scrolls, when an image is pressed the html and body will move to the top. I added an animation to the resize script but it seems to not be recognized.
$(".images img").on('click', function () {
$(this).toggleClass('selected');
$('html,body').animate({
scrollTop: $('.active').offset()
});
});
Code: http://jsfiddle.net/qSDP5/
EDIT*
I put a sticky header to the top of the page and used
$('html,body').animate({
scrollTop: $('#sticky').offset().top
});
But it doesn't seem to want to scroll to it.

It's because not only you don't have any element with the class of active, but also you are not defining the coordinate direction of that element you want to access, because of that your script doesn't scroll to that.
change this line :
scrollTop: $('.active').offset()
to this if you want to scroll to the top of the page
scrollTop: 0
or you can scroll to an element which resides in your html something like:
scrollTop: $('#header').offset().top
see this: http://jsfiddle.net/qSDP5/1/