We Keep Coding

Open nav-tab-content then scroll down in Bootstrap 4

Hello I have two functions which are working. I understand a little about how programming works but I dont have background in javascript or jquery (idk).
This function opens a nav tab-content:
<script> function homeTab() {
$('[href="#nav-home"]').tab('show');
}
</script>
This function auto scrolls to the shopping div at the bottom:
<script>
$('#nav-shop-tab').click(function () {
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1500);
});
</script>
Functions above are all working
Home and Shop are in the same page. Shop is in bottom
This is the about tab
What I want is how can I merge these two functions? so that when I click a button(SHOP at GCO) it will first open the "home" tab then scroll down to the shopping div?
Is it possible? I'm open to other solutions as well so that I can learn more. Thanks

ok i made some fix, try changing the function when you click the shop tab to this
$('#nav-shop-tab').click(function () {
$("#nav-home-tab").click();
setTimeout(() => {
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1500);
}, 200);
});

How to anchor a page-section to the bottom of a navigation bar that appears on scroll?

I have a single page website (Squarespace - Pacific template) https://pacific-demo.squarespace.com/?nochrome=false with a Navigation bar at the top that scrolls away with the home-page and appears again once you scroll to the first-section. All the links are anchored to the correspondent section that slides up and stops in line with the Navigation Bar that appears on scroll.
I would like to add a link to the home-page with an arrow that sends you down only to the first-section and aligns this with the appearing navigation bar.
With a simple anchor link the section scrolls to the top of the browser behind the Navbar.
I tried this script (adding one for each media-query I used) and it works, but if I resize the browser, the Navbar disappears, so I'd like to use something different.
if($(window).width() < 1438)
{
$("#arrow-down").click(function() {
$('html,body').animate({
scrollTop: $("#officina-page").offset().top -120},
'slow');
});
}
else if($(window).width() > 1439 && $(window).width() < 1558)
{
$("#arrow-down").click(function() {
$('html,body').animate({
scrollTop: $("#officina-page").offset().top -130},
'slow');
});
}

You can do something like this with the good offset (height of your menu):
if($(window).width() > 1438) {
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
}

jQuery Links have to be clicked twice to scroll

I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?

For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});

Keep anchor tag href from jumping to it's page

I have the following anchor tag in my HTML that I use to load contents from that HTML location into a contents div on the current page. This anchor tag is part of Bootstrap treeview plugin I use for generating a table of contents:
1.1 Overview
In my JavaScript, I have the following code I use to listen for two events. One for the anchor tag so that I disable the default behavior and the other to process the anchor tag and load the contents and scroll to the anchor as follows:
$("a[href*='#']").click(function(e) {
e.preventDefault();
});
// Add smooth scrolling to all links inside a navbar
$treeview.on('nodeSelected', function (e, data) {
e.preventDefault();
if (data && data.href !== "") {
// Split location and hash
var hash = data.href.match(/[#].*/g)[0];
var location = data.href.match(/[^#]*/g)[0];
if (prevLocation === location) {
// Don't reload page if already at same location as last clicked
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
} else {
prevLocation = location;
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
}
$body.scrollspy('refresh');
$sideBar.affix('checkPosition');
});
What I am seeing is that the first time a click a node in my TOC, it loads the HTML into the contents div as expected but the second time I click it, it loads the HTML page that is referenced in the anchor tag despite my efforts to track if I previously loaded it as I do with the conditional logic above. I also notice that on the subsequent click, the anchor selector is not being called.
Any idea how I can accomplish having the TOC initially load the HTML from another page into the current page and then on subsequent calls just scroll to the anchor location (ie., chapter)?

Combining the two functions and returning false appears to work as follows:
$("a[href*='#']").click(function(e) {
e.preventDefault();
if (this && this.href !== "") {
// Split location and hash
var hash = this.href.match(/[#].*/g)[0];
var location = this.href.match(/[^#]*/g)[0];
if (prevLocation === location) {
// Don't reload page if already at same location as last clicked
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
} else {
prevLocation = location;
$('#contents').load(location, function () {
$('html, body').animate({
scrollTop: $(hash).offset().top - 55
}, 200);
});
}
}
$body.scrollspy('refresh');
$sideBar.affix('checkPosition');
return false;
});

How to make only one accordion slide open at a time

I have a site I'm working on that is all based on accordion style slides. The problem is that the code I used does not close the open slides by default. I need it so that when you click one slide it opens and then when you click another it closes the first slide and so on. I posted all the JS from the page, what can I add to this to make it only allow one slide to be open at a time?
<script>
if ($(this).scrollTop() > 100) {
$('#up').fadeIn();
} else {
$('#up').fadeOut();
}
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#up').fadeIn();
} else {
$('#up').fadeOut();
}
});
$('#up').click(function(){
$('html, body').animate({scrollTop:0}, 800);
});
</script>
<!-- Menu -->
<script>
$('.link').click(function() {
var link = $(this).attr('href');
$('html,body').animate({scrollTop: $(link).offset().top - 80}, 800);
});
</script>
<!-- Collapse Toogle -->
<script>
$('.accordion-toggle').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top - 105}, 800);
});

You could change the class of the item clicked.
$('.accordion-toggle').click(function() {
for (c=0;c<$('.collapse').length;c++){
$("#"+$('.collapse')[c].id).collapse('hide');
}
$('html,body').animate({scrollTop: $(this).offset().top - 105}, 800);
});
So when you click at a .menu-item you can get all .menu-item-clicked and change them to close.

jQueryUI has some very useful widgets, including accordions. Please use that, instead of trying to recreate the behavior. (Unless you want to find out how it works, creating something for learning purposes is valid. But then your question should specify that.)