Develop Reference

JavaScript smooth scroll not working in safari browser

I have created small menu order application, I have added 5 menu categories is Desserts, salad, thai noodles and more using horizontal scroll bar. if I click salad or any categories move left and right position working fine in chrome. I checking safari browser not working horizontal scroll. what I am missing. could you please check and let me know.
html:
<div class="menu" id="menu">
<div class="topnav sticky" id="stickyMenu"><span data-id="appetizers" id="nav1" class="cat-nav">Appetizers</span><span data-id="desserts" id="nav2" class="cat-nav">Desserts</span><span data-id="pizza--classic-11-inches-" id="nav3" class="cat-nav active">Pizza (Classic 11 inches)</span><span data-id="salad" id="nav4" class="cat-nav">Salad</span><span data-id="thai-noodles" id="nav5" class="cat-nav">Thai Noodles</span></div>
<!-- <div class="row filter">
<input type="text" id="gsearch" class="form-control gsearch" placeholder="Search within this Menu...">
</div> -->
</div>
js code:
$(document).on('click', ".topnav .cat-nav", function(e) {
$(".topnav .cat-nav").removeClass("active");
$(this).addClass("active");
var target = $(this).data("id");
$('html, body').animate({
scrollTop: ($("#"+target).offset().top - 50)
}, 500);
});
$(window).scroll(function() {
//get current sroll position
var scrollPosition = $(window).scrollTop();
//get the position of the containers
var s=["appetizers","desserts","pizza--classic-11-inches-","salad","thai-noodles"];
for (i=0; i<s.length; i++) {
if (scrollPosition >= ($("#"+s[i]).offset().top) - 190) {
$("#nav"+(i+1)).addClass("active");
$("#nav"+(i+1)).siblings().removeClass("active");
// $('.cat-nav').scrollLeft(myScrollPos);
var element = document.querySelector(".active");
element.scrollIntoView({behavior: "smooth" ,inline: "center"});
// $("#nav"+(i+1)).css({behavior: "smooth" ,inline: "center"});
}
}
});

Add overflow: auto to your sticky or topnav class:
.sticky {
overflow: none;
overflow-x: auto;
display: block;
}
This might work.

How can i show/hide image with scrollTop

I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.

Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">

Having trouble getting the scroll animation to not trigger the scroll event

I currently have a number of div tags that can be seen below that are each the height of the viewport.
<!-- .current represents the div the user is currently viewing -->
<div class="full-height current" id="id1">
<div class="container">
</div>
</div>
<div class="full-height" id="id2">
<div class="container">
</div>
</div>
<div class="full-height" id="id3">
<div class="container">
</div>
</div>
<div class="full-height" id="id4">
<div class="container">
</div>
</div>
<div class="full-height" id="id5">
<div class="container">
</div>
</div>
I am attempting to implement a feature where upon a user scrolling, the window will scroll to the next div tag, always having only one div in view at a time. The way I implemented it works great, except for the fact that the animation triggers the scroll event again, resulting in an endless loop of the page scrolling once the user scrolls at all. I attempted to fix this by having a variable that will stop the event from triggering if the animation is in progress, but it does not seem to work. I am aware that I didn't do it for the scroll up, but I just wanted to see if it worked for the down first.
$(window).scroll(function(event) {
var scrollTop = $(this).scrollTop();
// If user scrolls down
if ((scrollTop > lastScrollTop) && $(".current").next("div").length > 0) {
if (animating == false) {
console.log("down");
$(".current").next("div").addClass("current");
$(".current").first().removeClass("current");
animating = true;
$("html, body").animate({
scrollTop: $(".current").offset().top
}, 1000, function() {animating = false});
}
// If user scrolls up
} else {
if ($(".current").prev("div").length > 0) {
console.log("up");
$(".current").prev("div").addClass("current");
$(".current").last().removeClass("current");
$("html, body").animate({
scrollTop: $(".current").offset().top
}, 1000);
}
}
lastScrollTop = scrollTop;
});
CSS included just in case. The 100vh - 111px is due to a fixed navbar at the top that is 111px high
/* Makes the element take up the entire height of the screen */
.full-height{
height: -o-calc(100vh - 111px); /* opera */
height: -webkit-calc(100vh - 111px); /* google, safari */
height: -moz-calc(100vh - 111px); /* firefox */
}
#id1 {
background-color: red;
}
#id2 {
background-color: blue;
}
#id3 {
background-color: yellow;
}
#id4 {
background-color: green;
}
#id5 {
background-color: purple;
}
If anyone could give me any ideas for fixing my problem, that would be great.

You'll want to stop the event and preventDefault. Here is some code from a current landing page:
$(document).ready(function () {
$('a.page-scroll').on('click', function(event) {
var link = $(this);
$('html, body').stop().animate({
scrollTop: $(link.attr('href')).offset().top - 50
}, 500);
event.preventDefault();
});
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 80
});
});
It uses bootstrap scrollspy so just ignore that. But notice that it stops any scroll animation that could be running and then also calls event.preventDefault() to stop the scroll event from bubbling and thus becoming recursive.
EDIT:
O.k. so I've a better look and the basic problem re: infinite scrolling is the code doesn't check if the scrollTop is already at 'where it needs to be'. You need an additional check to short circuit the scroll:
if (animating == false) {
if ($(this).scrollTop() == lastScrollTop) return;
if (($(this).scrollTop() > lastScrollTop) && $(".current").next("div")) {
console.log("down");
$(".current").next("div").addClass("current");
$(".current").first().removeClass("current");
animating = true;
$("html, body").stop().animate({
scrollTop: $(".current").offset().top
}, 1000,
function () { lastScrollTop = $(this).scrollTop(); animating = false; });
// If user scrolls up
} else {
if ($(".current").prev("div").length > 0) {
console.log("up");
$(".current").prev("div").addClass("current");
$(".current").last().removeClass("current");
$("html, body").stop().animate({
scrollTop: $(".current").offset().top
}, 1000, function () { lastScrollTop = $(this).scrollTop(); animating = false; });
}
}
}
Otherwise as it stands it will always either scroll up or down and never settle. That said with that "working" it's a terrible user experience. It will jump about since your scroll to code will fight the user on current scrollTop if they keep scrolling. i.e. your code will make it jump back to a previous position.

Try defining scroll event handler as named function ; defining lastScrollTop outside of scroll handler ; substituting .one() for .on() to allow animation to complete before re-attaching scroll event ; use .promise() which should be called at most once to avoid .animate() complete callback being called twice with selector "html, body" ; substituting single if to check for next or previous element .length and .animate() call for multiple if..else conditions and statements, animation function calls ; re-attach scroll event at .then() following animation completion .promise()
var lastScrollTop = 0;
function scroller(event) {
var scrollTop = $(this).scrollTop();
var direction = scrollTop > lastScrollTop ? "next" : "prev";
var el = $(".current")[direction](".full-height");
console.log(direction === "next" ? "down" : "up");
if (el.is("*")) {
$("html, body").animate({
scrollTop: el.offset().top
}, 1000).promise().then(function() {
console.log(this)
lastScrollTop = $(window).scrollTop();
$(".current")
.removeClass("current")[direction]("div")
.addClass("current")
setTimeout(function() {
$(window).one("scroll", scroller)
})
});
} else {
lastScrollTop = scrollTop;
$(window).one("scroll", scroller)
}
}
$(window).one("scroll", scroller);
/* Makes the element take up the entire height of the screen */
.full-height {
height: -o-calc(100vh - 111px);
/* opera */
height: -webkit-calc(100vh - 111px);
/* google, safari */
height: -moz-calc(100vh - 111px);
/* firefox */
}
#id1 {
background-color: red;
}
#id2 {
background-color: blue;
}
#id3 {
background-color: yellow;
}
#id4 {
background-color: green;
}
#id5 {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- .current represents the div the user is currently viewing -->
<div class="full-height current" id="id1">
<div class="container">
</div>
</div>
<div class="full-height" id="id2">
<div class="container">
</div>
</div>
<div class="full-height" id="id3">
<div class="container">
</div>
</div>
<div class="full-height" id="id4">
<div class="container">
</div>
</div>
<div class="full-height" id="id5">
<div class="container">
</div>
</div>

If you define height 100vh ,scroll event wont trigger

jQuery on scroll toggle between two classes

By default I have a navigation bar which has a red background color.
What I want to do is when the users scrolls down more than 100px to change the background to blue and if he goes back to 0px to change the background to it's default state.
I want to do this by toggling between two classes, for example <div class="navigation red"> should be the default class and if the user scroll down to add <div class="navigation blue"> and if he scrolls back to have <div class="navigation red"> again.
Here is my attempt :
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.navigation').toggleClass( "blue");
}
});
});
But this is not working. Here's a jsbin.
Any ideas how to get it to work ?

Try the following code:
$(document).ready(function () {
$(window).scroll(function () {
$('.navigation').toggleClass("blue", ($(window).scrollTop() > 100));
});
});
Here's the example in jsbin

Using toggleClass() may be the wrong solution for this. Use addClass/removeClass instead:
if ($(window).scrollTop() > 100){
$('.navigation').addClass( "blue");
}
else {
$('.navigation').removeClass("blue");
}

You can use .addClass() and removeClass()like this one: http://jsfiddle.net/csdtesting/qhfmw8hx/
$(window).scroll(function() {
var windowYmax = 100;
var scrolledY = $(window).scrollTop();
if (scrolledY > windowYmax) {
$('.navigation').addClass("blue");
} else {
$('.navigation').removeClass("blue");
$('.navigation').addClass("red");
}
});
.navigation {
height: 800px;
}
.navigation.red {
background: red;
}
.navigation.blue {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation red">scroll me down and up please to see me changing colors...</div>
Hope it helps!

The problem is that you call toggleClass everytime the user scrolls. This code would fix this issue:
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100 && !$( ".navigation" ).hasClass( "blue" ) || $(window).scrollTop() === 0 && $( ".navigation" ).hasClass( "blue" ){
$('.navigation').toggleClass( "blue");
}
});
});
The jsbin

You're working with adding a class and removing another, i would suggest just using addClass and removeClass for this case. Also you can chain the methods.
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.navigation').addClass('blue').removeClass('red');
} else {
$('.navigation').addClass('red').removeClass('blue');
}
});
});
Here's the jsbin

jQuery slideToggel and scroll to bottom

In this example I am trying to slideToggel a part of the footer and also scroll to the bottom of the page and change the img to up.png. How do I add those 2 added funcationality to the slideToggle.
HTML
<li id="show_footer"><a><img src="images/footer/down.png" /></a></li>
<nav id="sub">
</nav>
CSS
nav#sub {
display: none;
}
SCRIPT
$("#show_footer").click(function() {
$("#sub").slideToggle("slow");
});

Try this code,
$("#show_footer").click(function() {
$("#sub").slideToggle("slow");
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
if($('#sub:visible').length > 0){
$('#show_footer > a > img').attr('src', 'new/src/file/up.png');
}else{
$('#show_footer > a > img').attr('src', 'new/src/file/down.png');
}
});
This should do the trick. Edited because smooth scroll. THIS IS NOT TESTED.