We Keep Coding

Anchor links not working on iPad but working on iPhone

I am working on a website with anchor links that scroll to the specific section. Everything works fine on desktop, the I added the following script to make it work on mobile.
<script>
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (screen.width <= 1400) {
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;
}
}
}
});
});
</script>
The script works perfectly on phones (tested on iPhone) but doesn't work on iPad. The anchor links instead of scrolling just jump to their section.
https://pacific-demo.squarespace.com
I am using this template which on its original form has the same problem but still I don't get why while the script above works on phones, it ignores the iPads....

JQuery & Javascript anchor link top offset for different page link

I have the following working script from CSS Tricks, I have adjusted it to have a top offset, due to a fixed header menu:
$(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 - 180
}, 1000);
return false;
}
}
});
});
HTML:
Link in the header menu
About
Link on the subpage
<a name="about"></a>
On the same page, the scrolling with top offset works fine, however when there is a link to an anchor link on a different page, the top offset is ignored. How can I fix that?

Smooth Scrolling on parent menu items with SlickNav

I'm using Slicknav on my site to add in a mobile friendly menu. I have a script I'm running to add smooth scrolling to page anchors, for some reason it works for child menu items but not parent menu items.
I'm guessing this is because the parent menu item has some sort of click function attached to it to open the child menu. I'm not great with jQuery and I'm not sure how to get around this.
Here's what I'm using to add the scrolling effect:
$('.slicknav_menu 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').stop().animate({
scrollTop: target.offset().top - 120 //offsets for fixed header
}, 1000);
return false;
}
}
});

How do I use javascript to animate a scroll from a link to an anchor?

http://www.littlestonegroup.org
If you click "Learn" i want it to scroll down to next link. I can have it snap to using anchor links, but I want to have the scroll effect. I have looked at a number of tutorials, but I'm not sure how to install javascript nor implemented a script suggested by a tutorial.
Thanks in advance, I really appreciate your help!

I found this smooth scroll function over at CSS-Tricks:
$(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;
}
}
});
});
Here is the function in action JSFiddle
You can add it right before the closing body tag by wrapping the above function in:
<script type="text/javascript">
function here
</script>

Can't get smooth scrolling from fixed menu item to work

I'm using the following Javascript on my web site to create a smooth scrolling effect when the user clicks the Contact Us link, to scroll to the contact information in the footer. I got this code snippet from a comment by Devin Sturgeon on the CSS-Tricks post on smooth scrolling. My only guess is that the issue arises from the fact that the anchor link is not in a set position, but in the fixed menu. According to the post, the snippet should work simply by cutting and pasting it in.
<script type="text/javascript">
$('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;
}
}
});
</script>

this line $('a[href*=#]:not([href=#])') is returning an empty set so your click handler is not being set on any dom element. The scrolling is being done by the browser using the old fashion anchor tag <a name="contact"> </a>.
#FakeRainBrigand is right, your document isn't fully loaded when you add your click handler. Just add it to the ready event.
$(document).ready(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 - 181
}, 1000);
return false;
}
}
});
});