We Keep Coding

jQuery resetting scroll of window after scrollTop() call

I have an off canvas menu that slides in from the right and sits on top of the page. To prevent a scroll bar I am setting the content section's position to fixed while the menu is open. Problem is, when I close the menu the scroll position on the page is lost, the user is returned to the top of the page.
I am trying to store the scroll position of the page and then set the scroll when the window is closed, but its not working. If I debug the code I can see the scrollTop() functioning as expected, but then it goes into the jQuery.js script and after several function calls it resets the scroll to the top of the page.
What am I doing wrong?
var scrollPos;
function openMenu() {
$('body').addClass('open');
}
function closeMenu(compat) {
$('body').removeClass('open');
}
/*** Event Handlers ***/
$('#js-menu-toggle').on('click', function() {
scrollPos = $(window).scrollTop();
openMenu();
});
$('#js-menu-close').on('click', function() {
closeMenu();
$(window).scrollTop(scrollPos);
});

My apologies for not providing enough of an MCVE.
It turns out the problem was the events were bound to an <a> link with a "#" href, so adding in
return false;
as the last line of the .on events solved my problem.

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/

How to use the same jQuery scrolling function for multiple elements

I have a scrolling function that reveals a 'scroll to top' element when user scrolls to 160 pixels, when clicked this element the page scrolls to the top of the page.
I want to use that function create more scroll buttons which will be revealed at different stages in the document and that scroll to different areas.
For example when the user scrolls to 400 pixels down the element "next" appears when clicking it page scrolls 300px down, they get to 900px from top a new scroll element appears which when clicked scrolls down to 1300px, and so on.
here is the jQuery code i have:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 160) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
HTML:
<div class="scrollToTop-container">
<img src="img/icon_arrow_up.png" width="24" height="24" /> <br/>Scroll to top
</div>
i hope thats not too confusing.
Thanks

Maybe you can use a function like this I made reusing some parts of your code:
function scroll(id,show,limit,timeout){
$(window).scroll(function(){
if ($(this).scrollTop() > show) {
$(id).fadeIn();
} else {
$(id).fadeOut();
}
});
$(id).click(function(){
$('html, body').animate({scrollTop : limit},timeout);
return false;
});
}
And then use it like this:
scroll(".scrollToTop",160,0,800);
where first parameter is class or id you want to be affected, second is the position of the element at certain height (from top), third is limit (where you want to scroll up) and last one is the duration of the animate function.
EDIT: You may also like to stop on specific px, not only scroll to top, so I changed the function to set the scrollTop position at your desire.

Show and hide a Div on scroll up and down

I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.
Here's what I have. It seems to work on scroll down, the image div fades in.
When I scroll back to the top, the div doesn't fadeOut. Any tips?
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('#toTop').fadeIn();
}
else
{
$('.#toTop').fadeOut();
}
});

I think you've a typo in your code: $('.#toTop').fadeOut(); should be $('#toTop').fadeOut();
Update
Just a simple improvement. To prevent the element be faded all the time you scroll, check if it was already faded earlier:
var $toTop = $('#toTop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
});

how to show a div when scroll bar goes down, and when i scrollbar goes up it should disappear

i have a website it like 1800px in height. i want when user scrolldown around 200px it show an div on the top of the layout and its should stick with the page. when user scroll back to top , the div should disappear.

You can trigger an event on scroll:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
topDiv.show();
} else {
topDiv.hide();
}
});

You can use the jquery scroll method
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
});