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 to set jQuery breakpoints?

Because this is my first post, so in the beginning welcome everyone.
Since I'm just starting in JS and jQuery, can someone suggest how to deal with jQuery breakpoints?
On the website, I have a menu at the top in position: fixed and height: 200px. In the menu linked to scroll to a specific section using jQuery. The selected section goes to the top of the page.
I have created breakpoints in CSS and e.g. below 1024px, the menu is already 100px hight. Do you have an idea on how to convert a rule in jQuery, so that below 1024px scrolls to top - 100?
<nav>
<a class="region" href="#">Okolica</a>
</nav>
<section class="s1"> <section>
nav {
height: 200px;
}
#media (max-width: 1024px) {
nav {
height: 100px;
}
}
$('.region').on('click', function () {
$('body, html').animate({
scrollTop: $('.s1').offset().top - 200
}, 2000)
})
I tried code below but it doesn't work.
document.addEventListener('DOMContentLoaded', init);
function init(){
let query = window.matchMedia("(max-width: 1024px)");
if(query.matches){
$('.region').on('click', function () {
$('body, html').animate({
scrollTop: $('.s1').offset().top - 100
}, 2000)
})
}}
Any ideas?

you can extract the window size with vanilla javascript
https://developer.mozilla.org/en-US/docs/Web/API/window/innerWidth
window.innerWidth

In jQuery you can write a breakpoint like this:
if ($(window).width() < 1024) {
//YOUR FUNCTION FOR EXAMPLE
$('.region').on('click', function () {
$('body, html').animate({
scrollTop: $('.s1').offset().top - 100
}, 2000)
})
}

class swap on scroll in JQuery

I'm working on a navbar whichs swaps classes to fade the background in and out.
I've targeted the window itself and listen to the scroll, determining on how far down the user is at the page, if the user if further down than 800px, the navbar should fade out, if the user scrolls back up to the top, the navbar should fade in again
This is what I have:
Javascript:
$(window).scroll(function() {
if ($(this).scrollTop() > 800) {
$( "#nav" ).removeClass('.menuOut', 500);
$( "#nav" ).addClass('.menuIn', 500);
} else {
console.log('there');
$( "#nav" ).removeClass('.menuIn', 500);
$( "#nav" ).addClass('.menuOut', 500);
}
});
</script>
Navbar:
<nav id="nav" class="navbar menuIn">
<!--Content-->
</nav>
CSS:
.menuIn {
background-color: rgba(50,50,50,50.3);
}
.menuIn {
background-color: rgba(50,50,50,1);
}
(example of what I mean: http://www.albdifferent.com/)

Try with this below code it may help you.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$("#nav").removeClass("menuOut");
$("#nav").addClass("menuIn");
} else {
$("#nav").removeClass("menuIn");
$("#nav").addClass("menuOut");
}
});

Href scroll to page with offset

How can I make the page scroll to my id
I am using the code below to make the pages croll to where I want it, but it only is triggered on page load
$('html,body').animate({
scrollTop: $(id).offset().top - 64
}, 'slow');
On the links that are clickable, only
href="page#a"
is used. This scrolls to the div but not to where I desire. Is there a way where I can also offset by 64pixels on href? Thanks
The id's css are as follows:
#a, #b {
margin-bottom: 64 px;
visibility: hidden;
position: absolute;
left: -999em;
}

var top_val = $('.test');
$('html, body').stop().animate({
scrollTop: top_val.offset().top
}, 'slow');

$(document).ready(function() {
function scroll (id) {
$(id).bind('click', function(event) {
event.preventDefault();
var $anchor = $(this).attr('href');
$('html, body').stop().animate({
scrollTop: ($anchor).offset().top - 64
}, 'slow');
});
}
scroll('#page1');
scroll('#page2');
});
<a href="" id="page1" >Visit W3Schools</a>
<a href="" id="page2" >Visit W3Schools</a>

Horizontal scrolling upon button click (viewport + scrollLeft)

I am pretty sure it's a very very easy question, but even after several hours of reading through Stackoverflow/Google.. still no luck.
I have a horizontal scrolling website, works great. Now i've added two buttons at the bottom of the screen (left/right).
If a visitor clicks on the 'right' button, i want the whole page to scroll to the next 'section', which is exactly $(window).width() pixels to the right.
My idea was to add so jquery that upon clicking the button ScrollLeft: $(window).width() + $(window).ScrollLeft().
Theoretically this would start with the first click scrolling rightwards exactly the width of the viewport. the 2/3/4 click it would start at the current ScrollLeft() position and once more add the viewport width.
the jquery that i use for this is the following (most likely it's somewhat bloated, jquery is not my strongsuit)
I've tried defining variables, break it down further etc. All to no avail.
$(".right a").on("click", function(event) {
event.preventDefault();
$("html, body").animate({
scrollLeft: $(window).scrollLeft() + $(window).width()
}, "slow"); //Animates the scroll
});
$(".left a").on("click", function(event) {
event.preventDefault();
$("html, body").animate({
scrollLeft: $(window).scrollLeft() - $(window).width()
}, "slow"); //Animates the scroll
});
-edit-
as requested here the HTML markup.
The articles inside #horz-wrap are actually scrolling.
<div class="sitewrap">
<div class="portfolio-wrapper">
<section id="horz-wrap">
<article class="post">
<!--section here-->
</article>
<article class="post">
<!--section here-->
</article>
</section>
</div>
<ul class="horz-nav">
<li class="left"><</li>
<li class="right">></li>
</ul>
--edit 2--
Upon request I just uploaded the page, live version: http://lauretf35.thirtyfive.axc.nl/laurens/test.html
Thanks!

Here's the change you need, you may still need some fix but this will help with scrolling.
JavaScript
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('table').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
CSS:
table {
border-collapse: collapse;
border-spacing: 0;
position: absolute;
top: 200px;
width: 100%;
display: inline-block;
}