Develop Reference

Back to Top Button Issue (Potentially)?

I've got a back to top button that shows up on my webpage that I'm working on. When you scroll down and sometimes when it's clicked it jumps to the top and then jumps back to where you were on the page and then smoothly scrolls to the top like it's supposed to. Keep in mind that it does not do this all the time. Would this just be a lag or glitch issue or if there some error in my script?
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 615) {
$('.ion-android-arrow-dropup-circle').addClass('show');
} else {
$('.ion-android-arrow-dropup-circle').removeClass('show');
}
});
$('.ion-android-arrow-dropup-circle').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
};
Searched 40+ questions and couldn't find an answer. Only saying this because if you don't and somebody finds one they always say, "You should have looked before asking." I see it all the time.

ANSWER TO MY OWN QUESTION
After going so long without responses I had moved on and decided not to worry about this issue at that time. Today, I was working on a different site using the same jQuery script and was having the same problem. I decided to try and fix it myself since I couldn't find help on the issue.
The solution was simple! I don't know how I missed it the first time around. All I did is take the above code and add one function to it:
$('.ion-android-arrow-dropup-circle').click(function(event) {
event.preventDefault()
});
I forgot all about needing to remove the default action of clicking a link which is jumping to the destination. It now works perfectly smooth and looks great, just like I wanted to begin with!
My fully updated script for your reference:
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 50) {
$('.ion-eject').addClass('show');
} else {
$('.ion-eject').removeClass('show');
}
});
$('.ion-eject').click(function(event) {
event.preventDefault()
});
$('.ion-eject').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 200, 'linear');
};

Set scrollbar to zero (once) after toggle a div appearing from top (push down) like Airbnb

i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.
When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.
Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)
This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)
jQuery(document).on('click', '.flip', function(e){
e.preventDefault();
jQuery(".panel").slideToggle("slow");
});
$(window).scroll(function(){
if($(this).scrollTop() > 630) $('.panel').hide();
if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
});
Hope to hear from you guys,
cheers Joeri

Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/
Hope you means like this.
JQUERY
$(document).ready(function () {
// scroll to top and show top content
$('#show_top_bar').on('click',function(){
$('html, body').stop().animate({
scrollTop: 0
}, 300, function() {
$('#top_bar').slideDown(300);
});
});
// hide top content on click close icon
$('#close_top_bar').on('click',function(){
$('#top_bar').slideUp(100);
});
});
$(window).scroll(function() {
// hide top content when scroll position is top of content
if($(this).scrollTop() > $('#content').position().top){
if($('#top_bar').css('display') !== 'none') {
$('#top_bar').slideUp(0);
$('html, body').stop().animate({
scrollTop: 0
}, 0 );
}
}
});

Modifying this scrolling nav menu script?

I am a noob and for a school project I was trying to create a single page site that had a static nav menu at the top that always stayed there and I wanted it to do an animated scroll effect when you click it's link. Someone here made this for me and it works perfect.
However, you notice it says .top - 98 and that is because my nav is 98px tall so that it doesn't cut off the section it's jumping to.
Now that I am getting into media queries, I may increase the height of that nav at certain breaks. So I am wondering, is it possible to change this from 98 to some sort of [nav current height] variable? So that it will work regardless of what the height of my nav is?
Thanks in advance!!
$(document).ready(function() {
$("nav a").on('click', function() {
var link = $(this).attr('href');
$('html,body').animate({
scrollTop: ($(link).offset().top - 98)
}, 'slow');
return false;
});
});

how about
$('html,body').animate({scrollTop: ($(link).offset().top - $('nav').height())},'slow');

Yes you can do that
scrollBarFunc = function(){
var myNavHeight = $("#myselectorId").height(); //just put here your id or class
$("nav a").on('click',function(){
var link = $(this).attr('href');
$('html,body').animate({scrollTop: ($(link).offset().top - myNavHeight)},'slow');
return false;
});
}
$(document).ready(function(){
scrollBarFunc();
});
$(window).resize(function(){
scrollBarFunc(); //recall function to work when you resize
});

Full page slider with native scrollbar

I am building a full page slider that keeps the native scrollbar and allows the user to either free scroll, use the mouse wheel or navigation dots (on the left) to switch to a slide.
Once the user is on the last slide and tries to scroll down further, the whole slider moves up to reveal a simple scrollable section. If the user scrolls down and then tries to go back up, then this new section moves out of the way again and returns the slider back into view.
Fiddle: http://jsfiddle.net/3odc8zmx/
The parts I'm struggling with:
Only the first two navigation dots work. The third one DOES WORK if you area looking at the first slide. But doesn't do anything, if you are on slide 2. Note: the purple one is a short-cut to the second section of the page and not related to the slider.
When moving to the last slide (via the dots, if you're on the first slide) it causes the code to make the whole slider move upwards as it sees this as the user has slid past the last slide as per the description above. I have tried to combat this using a variable called listen to stop the scroll event listening when using the showSlide method... but it seems to be true even though I set it to false, and only reset it to true again after the animation...
When scrolling down using the mouse wheel, I can get to the second section and back up, but not to the first third section. I'm wondering if I could use the showSlide method to better handle this instead of the current dirty next and prev functions I have implemented.
Note: If the user has free-scrolled, when they use the mouse-wheel, I want the slider to snap to the nearest slide to correct itself... Any suggestions for how I could do this?
Can anyone offer some help?
Here's the JS:
var listen = true;
function nextSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: $('#section1').scrollTop() + $(window).height()
});
}
function prevSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: -$('#section1').scrollTop() + $(window).height()
});
}
function showSlide(index)
{
var offset = $('#section1 div').eq(index).offset();
offset = offset.top;
if(offset){
listen = false;
$('.slide-dot').removeClass('active');
$('.slide-dot').eq(index).addClass('active');
$('#section1').stop(true,false).animate({
scrollTop: offset
}, 500, function(){
listen = true;
});
} else {
alert('error');
}
}
$(document).ready(function(){
var fullHeight = 0;
$('#section1 div').each(function(){
fullHeight = fullHeight + $(this).height();
});
var lastScrollTop1 = 0;
$('#section1').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
if(listen){
$('body').addClass('shifted');
}
}
}
lastScrollTop1 = st;
});
$('#section1').on('mousewheel', function(e){
e.preventDefault();
var st = $(this).scrollTop();
if (st > lastScrollTop1){
nextSlide();
} else {
prevSlide();
}
});
var lastScrollTop2 = 0;
$('#section2').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
} else {
if( st == 0 ){
$('body').removeClass('shifted');
}
}
lastScrollTop1 = st;
});
$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});
$('.slide-dot').first().addClass('active');
$(document).on('click', '.slide-dot', function(e){
e.preventDefault();
showSlide( $(this).index() );
});
$(document).on('click', '.slide-dot-fake', function(e){
e.preventDefault();
$('body').addClass('shifted');
});
});
And for those wondering why I'm not using something like fullPage.js, it's because it can't handle the way I want to transition between the two areas and have two scrollbars (one for each area).

You can use:
e.originalEvent.wheelDelta
instead of:
st > lastScrollTop1
in the mousewheel event for your third problem to check if the user has scrolled up or down. And also change the +/- in prevSlide. I used dm4web's fiddle for your first problem. And I used:
scrollTop: offset - 1
instead of:
scrollTop: offset
for your second problem, because when the scroll reaches to the last pixel of the third element, it automatically goes to the next section, so 1 pixel is enough for it not to.
Here's the fiddle: http://jsfiddle.net/3odc8zmx/3/

As suggested by #chdltest, you could do it by using fullPage.js.
Here's an example. Go to the last section.
Code used for the example:
Javascript
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
scrollOverflow: true,
scrollBar: true,
afterLoad: function (anchor, index) {
//hiding the main scroll bar
if (index == 4) {
$('body, html').css('overflow', 'hidden');
}
//showing the main scroll bar
if (index == 3) {
$('body, html').css('overflow', 'visible');
}
}
});
CSS (in case you prefer to use the normal style for it)
/* Normal style scroll bar
* --------------------------------------- */
.slimScrollBar {
display: none !important;
}
.fp-scrollable {
overflow: auto !important;
}
Advantages of using fullPage.js instead to your own code:
Strongly tested in different devices and browsers. (IE, Opera, Safari, Chrome, Firefox..)
Prevent problems with trackpads, Apple laptops trackpads or Apple Magic Mouse.
Old browser's compatibility, such as IE 8, Opera 12...
Touch devices compatibility (IE Windows Phone, Android, Apple iOS, touch desktops...)
It provides many other useful options and callbacks.

hashchange prevents scrolling to targeted div

I have an accordion element, and I need to have different panes expand on hashchange. The code I made, expands it but it doesn't scroll the the targeted div, and page never ends loading.
function hashChange() {
if (window.location.hash === '#senior-backend') {
$('#senior-backend, #backend-developer, #senior-frontend, #frontend, #dev-ops').hide(50);
$('#senior-backend').show(50);
$('#job-posts').removeClass().addClass('beige-bg');
$('#job-posts-top').removeClass().addClass('beige-spikes');
}
}
window.onhashchange = hashChange;
Could you please point out what am I doing wrong.
Thanks

You need to scroll the site using animate once you detect a change in the hash, for example:
var dest = $('#yourSelector').position();
var dtop = dest.top;
$('html, body').animate({
scrollTop: dtop
});
Living demo: http://jsfiddle.net/LZbK8/