We Keep Coding

Scroll to the top of the page and back to previous position onclick using Jquery

$('.course-header').click(function() { $("html, body").animate({scrollTop: 0}, "smooth"); return false; });
The page will scroll to the top of the page when ".course-header" clicked but I also want the page to scroll back to the previous (original) position when ".course-header" is clicked again. What can I do to make it happen?
I have tried to combining ".toggle()" with ".animate()" but it didn't work.

One solution is to declare a variable for tracking the scroll position and use it to return to the previous position on click:
//declare variable to track scroll position
let yscrollpos = 0;
$('.course-header').click(function() {
if(yscrollpos > 0) {
$("html, body").animate({
scrollTop: yscrollpos
}, "smooth");
yscrollpos = 0;
} else {
//get current scroll position
yscrollpos = $(document).scrollTop();
$("html, body").animate({
scrollTop: 0
}, "smooth");
}
return false;
});

scroll to next div already in browser

I have a series of divs that are 100% height with a scroll to function that takes you to the next div out of the viewport on background click. However, if the next div is already slightly in the viewport the whole thing is counted as being visible and the scroll to bypasses it. Can anyone offer direction on how to get the script to scroll to the div even if it's partially in the viewport already?
Codepen here.
If you begin scrolling slightly in the codepen and then click on the background you'll see that it doesnt scroll you to the div that's already in the viewport but the div after that.
$(document).ready(function() {
// get initial nav height
var $window = $(window);
var wst = $window.scrollTop();
var th = $('div.top').height();
var currentSlide = $('#wrapper').data( 'current-slide', $('div.slide').eq(0) );
$('div.scroll_images').css({ height: 'auto', overflow: 'visible', top: 0 });
$('div.scroll_images div.inner').css({ position: 'absolute', top: 0 });
$('div.slide').each(function() {
$(this).css('padding',function() {
return (($(window).height()-$(this).height())/2)+'px 0'
});
});
// scrollto for click on slide
jQuery.fn.scrollTo = function(hash) {
$this = $(this);
st = $this.offset().top - th; // subtract nav height
$('html, body').animate({ scrollTop: st }, 550
);
}
$('#wrapper').click(function(e){
//get the current slide index from the body tag.
$this = currentSlide.data( 'current-slide' );
$next = $(".slide:below-the-fold");
if($next.length) {
$next.scrollTo($next.attr('id'));
//Save the next slide as the current.
$('#wrapper').data( 'current-slide', $next );
} else {
//Throw us back to the top.
$('div.slide:first').scrollTo($('div.slide:first').attr('id'));
//Save the first slide as the first slide, which
//Cycles us back to the top.
$('#wrapper').data( 'current-slide', $('div.slide:first'));
}
})
//Images fade in
$('img').hide();
$('img').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
//Stop links affecting scroll function
$("a").click(function(e) {
e.stopPropagation();
});
});
(function($) {
$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top - settings.threshold;
};
$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
}
});
})(jQuery);

Here's what I might try to do: go through each div in the series. Find the div who's offset() is closest to $(window).scrollTop(). Now, find the next() div after the "current" one and scroll to it.
For comparing the offset() of each div, try something like this:
var closest = $('[selector]:first');
$('[selector]').each(function() {
var oldDistance = Math.abs(closest.offset() - $(window).scrollTop());
var newDistance = Math.abs($(this).offset() - $(window).scrollTop());
if(newDistance < oldDistance) {
closest = $(this);
}
}

jquery responsive on resize not working

i want to check (on resize) the window width and then load a special part of a script. when the browser window is < 500px width i want to scroll to the top of the div (when clicking on a menu link) and when the browser window is > 500px i want to scroll to the vertical middle of the div when i click on a menu link. it somehow works but it's slow and buggy.
first i create the "resize" function
then i check the browser width
(function($){
// on load
$(window).resize(function(){
var current_width = $(window).width(); //check width
$('.go').click(function (e) {
if(current_width > 700){ // when min-width 700px than go to center of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2 // scroll to verticall middle of div
}, 200);
}
else if(current_width < 700){ // when max-width 700px than go to top of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top + 0 // scroll to top of div
}, 200);
}
});
});
})(jQuery);
when id do it with "document ready" everything works fine ... but "document resize" makes problems.
fiddle here
update - got it working this way:
$(".go").click(function(){
if ($(window).width() < 800) { // if window smaller than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - 0
}, 200);
}
if ($(window).width() > 800) { // if window bigger than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
}, 200);
}
});

It would be better to attach the event handlers like this:
var resizeTimeout; //the timeout prevents triggering the resize event more than once
$(function () {
$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resize, 500);
});
$('.go').click(function (e) {
});
});
function resize() {
if ($(window).width() > 700) {
} else {
}
}

Maybe a bad idea but you can try something like this in css:
#media screen and (min-width: 480px){
$("body").css({"position":"absolute", "top":"12px", "left":"12px"}); //Set your x and y
}
#media screen and (min-width: 768px){
$("body").css({"position":"absolute", "top":"22px", "left":"22px"}); //Set other stuff
}
No javascript needed :)
PS: NOT tested!

Get Scroll position after Div is hidden

I have a webpage that has a floating div in it which follows the user as the page scrolls.
the page is made up of other divs that can be expanded and hidden using jquery slideToggle functionality.
the problem is when i hide a div, the scroll bar moves down the page as the div is hidden instead of staying at the top of the page. any idea why this is happening?
Code for the Scroll:
var scrollPos;
$().ready(function () {
var $scrollingDiv = $("#FloatingClaimToolBar");
$(window).scroll(function () {
var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
// global var
scrollPos = top;
$scrollingDiv
.stop()
.animate({ "marginTop": (top - 15) + "px" }, 0);
});
});
After the div is hidden i call this method with the intention of positioning the floating div back to the top of the page but it doesn't work:
function AdjustToolBar(divID) {
var $scrollingDiv = $("#FloatingClaimToolBar");
$scrollingDiv
.stop()
.animate({ "marginTop": (window.scrollPos-15) + "px" }, 0);
}

scroll to top button in jquery

i have div.triangle on my page at opacity 0
i want it to fade into opacity .95 once the bottom of the page is hit
then after that, i want it to scroll to the top of $(".container") once $(".triangle") is clicked again
i have this so far, i think i've got most of it right other than the event?
<script type="text/javascript">
$(document).ready(function(){
$(".container").scroll(function(){
var currentPosition = $(document).scrollTop();
var totalHeight = $(document).offsetHeight;
var visibleHeight = $(document).clientHeight;
if (visibleHeight + currentPosition >= totalHeight){
$(".triangle").fadeTo("slow",.95);
}
});
$(".triangle").click(function(){
$(".container").animate({scrollTop:0}, 'slow');
$(".triangle").fadeTo("slow",0);
});
});
</script>

try this:
$(document).ready(function(){
var bottom = ($(window).outerHeight() - $(window).height()) - 50; // 50 pixel to the bottom of the page;
$(window).scroll(function(){
if ($(window).scrollTop() >= bottom ) {
$(".triangle").fadeTo("slow",.95);
} else {
$(".triangle").fadeOut("slow");
}
});
$(".triangle").click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
$(".triangle").fadeOut("slow");
});
});