Develop Reference

jQuery: Make smooth scroll function work after loading page/navigating to the page

I've got the code below in our boilerplate that seems to work fine in the current setup. It scrolls to the section on the page when you click the navigation menu link or a link in a slick slider. What I found hard to solve is making it work when navigating from another page back to the homepage. It'll add the #discover hash to the url just fine, for example, but it won't register it for some reason.
It's been a while since I properly used jQuery 😅.
I've already added the standard on document ready code around the function hoping it would be that, but no dice. Hope anyone can clue me in about what's happening here.
$(function(){ });
/*
Only enable this when you want smooth scrolling!
Usage:
- Give the anchor you want to scroll to a certain position a href which starts with # and the class "scroll" ()
- Give the container you want to scroll to a name (<section name="container"></section)
- ???
- profit
*/
const scrollOffset = 0 // the amount of pixels the animation should scroll "extra" (When you have a sticky navigation for example)
$(function () {
$(
'.menu__item a[href*="#"]:not([href="#"]), .slider-list__link[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) + ']')
$('body').removeClass('no-scroll')
$('.navbar').removeClass('navbar--is-open')
if (target.length) {
setTimeout(() => { // This is used to prevent the animation from the menu closing from interfering with the scrolling animation. It could mess up the offsets otherwise
$('html, body').animate(
{
scrollTop: target.offset().top + scrollOffset, // Scroll to the target
},
400
)
return false
}, 500)
}
}
})
})

jQuery smooth scroll anchor links with fixed header and WP admin bar

I am using some JavaScript to create a smooth scroll effect to achnor links. The site has a fixed header so the content needs to be offset by whatever the height of the header is (this varies due to #media rules). On top of this when the user is logged in to WordPress the content needs to be offset further by the height of the WP admin bar (again, the height of this vaires depending on screen size).
I have set up two variables in my script to separately get the height of both these elements:
var headerHeight = $('header').height();
var adminbarHeight = $('#wpadminbar').height();
Further on in the script I want to offset the top by the height of the header plus the height of the admin bar if it exists (i.e. if a user is logged in).
$('html, body').animate({scrollTop: target.offset().top - headerHeight - adminbarHeight }, 500,
I am trying to offset by the headerHeight and the adminbarHeight but this is not working for me. If I remove 'adminbarHeight' it works but then it does not look correct for logged in users.
Is there something wrong with my syntax? Or perhaps I need to create an if statement to check if the adminbarHeight is greater than 0?
The full script I am enqueueing in my WP child theme is below:
( function( $ ) {
'use strict';
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
var headerHeight = $('header').height();
var adminbarHeight = $('#wpadminbar').height();
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) {
event.preventDefault();
$('html, body').animate({scrollTop: target.offset().top - headerHeight - adminbarHeight }, 500,
function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus();
};
});
}
}
});
}( jQuery ) );
Any help will be greatly appreciated! I am new to JavaScript so apologies if this is a really obvious error.
Thanks,
Chris

Add one page scroll to already existing template

I'm working on my first bootstrap website and yes, I'm a noob. After a long journey, I found this template to work with.
At the end of the day, it will contain over 20 fullpage sections like the header with texts, images, videos and audios.
This template has a scrolling script:
// Scrolls to the selected menu item on the page
$(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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Now, here is the special price question. There is this 'one page scroll' by Pete Design. This contains a template-css and js-file.
Is it possible to mix these two templates?
I like to add the Pete Design JS-Template to add:
scrolling section by section with the mousewheel/keyboard arrows and the swipe-function but I want/like to use the design (espacially navbar!) from Startbootstrap.

Vertical and horizontal scrolling on one page jquery

I want this effect:
(blue is the visible part for user)
structure of the page looks like this:
<div id="page1"></div>
<div id="page2"></div>
<div id="page3">
<div id="page3-1"></div>
<div id="page3-2"></div>
<div id="page3-3"></div>
</div>
<div id="page4"></div>
I want to make leftmenu points to take me with a smooth scroll on click to a certain point of the website. I found this nice function for this:
$(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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
It works great, but when I add one more a little modified (to target different anchors $('#page3 a[href*=#]:not([href=#])').click(function() {) and with scrollLeft: target.offset().left (for that horizontal scroll page) , it works only if there are overflows.
I made overflow: hidden for every page and overflow-x: scroll to that certain page that should scroll horizontally (to remove white space on the website) and then it doesn't work. maybe i should target different anchors. It is in Joomla. I think I am very close but can't figure it out. thanks!

Removing a function for Safari ONLY in JQUERY

Basically I've created a single page website and I've used JQuery to create a ScrollTo effect when clicking on different links. Because I have a fixed div at the top of the page, I've offset the target to the height of the fixed div at the top of the page, so that when it scrolls, the contents isn't hidden by the fixed div at the top of the page:
if ($target) {
var targetOffset = $target.offset().top - $("#div_at_top_of_page").outerHeight();
This works fine, scrolling the target div below my fixed navigation at the top of my page. However in Safari, the scroll to already scrolls below the div by default, so adding:
$("#div_at_top_of_page").outerHeight();
this causes Safari to scroll to the target, but also adding the height of the div at the top of the page, creating a margin.
I'm just looking for a solution to cancel this:
$("#div_at_top_of_page").outerHeight()
for Safari only. Any help would be appreciated, thanks!
EDIT: I'm open to any other solutions rather than browser detection.
Here's the complete thing:
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top - $("#fixed_div_at_top").outerHeight();
$(this).click(function(e) {
$('html, body').animate({scrollTop: targetOffset}, 800);
e.preventDefault();
var d = document.createElement();
d.style.height = "101%";
d.style.overflow = "hidden";
document.body.appendChild(d);
window.scrollTo(0,scrollToM);
setTimeout(function() {
d.parentNode.removeChild(d);
}, 10);
return false;
});
}
}

The direct answer to your question is to use $.browser (http://api.jquery.com/jQuery.browser/ -- deprecated long ago and removed in jQuery 1.9), but I can't recommend it. Better to use feature detection. Even better not to rely on either method. Have provided this as an answer only because you initially asked specifically about targeting Safari.