We Keep Coding

Some issues with a 'scroll to top button'

I have this 'scroll to top button' that pops up after the user has scrolled down 300px. Everything works fine so far. What I'm trying to do now, is to make this button pop up at a specific element.
Here is the jQuery:
// 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;
});
});
Ok, I then changed this line
if ($(this).scrollTop() > 100) {
to
if ($(this).scrollTop() > '.show-button-here') {
but it didn't work. Any ideas what I'm doing wrong?
Here is a fiddle: http://jsfiddle.net/v70L4buk/

You need to get the position of the element from the top of the page and then subtract how far from the top you want that element to get before showing the up arrow. In this case, I am showing the arrow when a link I created in the page gets to 300px from the top. Or you can remove the number and when that element gets to the top of the viewport the function will kick in.
if ($(this).scrollTop() > $('.show').offset().top - 300) {
JSFIDDLE: https://jsfiddle.net/gvpLe06c/1/

fadeOut on scroll at pixel height

i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});

I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo

Show A Sticky Bar Until User Scrolls Down to a <div>

I want to add a sticky bar at bottom of my page and I want it to fade out once user reaches to a div by scrolling and again fade in once user scrolls up and that div is not on screen anymore.
And it shouldn't show if user screen is big enough to show that div normally.
Please guys help me...
I am currently using this code:-
<script type="text/javascript">
//<![CDATA[
$(window).bind("scroll", function() {
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").fadeIn();
checkOffset();
} else {
$("#bottbar").stop().fadeOut();
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'absolute');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'fixed'); // restore when you scroll up
}
}
//]]>
</script>
but it is not working as expected on my site bookaire.com
I am not sure whats the problem is with this code, it doesn't show the bar when site loads, it show only when user scrolls a little and when it reaches the stopdiv instead of hiding the bar it get stuck at center of screen.

Whew! that took me a while since I'm still a beginner with javascript but I think I got it.
Note: the bar is getting stuck in the middle on certain screen size because you are only changing the position from fixed to absolute in your javascript. instead, change the display from block to hidden.Also note that the css for #bottbar should already be display:block
I believe your requirements are:
1. it shouldn't show if user screen is big enough to show that div normally
2. to fade out once user reaches to a div by scrolling
See: JSFIDDLE
$(document).ready(function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
else {
$("#bottbar").css('display', 'block');
}
});
$(window).bind("scroll", function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").css('display', 'block');
checkOffset();
}
else {
$("#bottbar").css('display', 'none');
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'none');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'block'); // restore when you scroll up
}
}

Bootstrap accordion scroll to top of active panel heading

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

Scroll back to top not working in IE6

I have the following code:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 900);
return false;
});
});
When you click on back to top it work's fine in IE6 - but when the fadeIn and fadeOut 'back to top' doesn't seem to work in IE6.

Try this
$(window).scrollTop() is the one that worked for me in all the current browsers
or
window.scroll(x, y);