We Keep Coding

JS scrollTop not working on Safari Browser

The following code I have used to apply smooth scrolling between menu links and content row containers. This seems to be working fine on all browsers except for Safari.
I understand I need to define 'html' and 'body' within the offset line, however, I am not sure if I have done this correctly. Would appreciate some help on this! Thanks.
$(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;
}
}
});
});

Smooth scrolling javascript code messing with Bootstrap Tab code

I have the following code to enable smooth scrolling for on page navigation which I simply copy-pasted from somewhere I do not remember.
Since the smooth scrolling happens on an anchor tags click, it messes up Bootstrap Javascript for Tab which too utilizes anchor tags(This is what I have concluded, I hope I am correct).
$(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 I do not understand this $('a[href*="#"]:not([href="#"])') part of the code, can somebody please put some light on what this is doing ? Also how do I fix this so that the above function fires only on On Page anchor clicks ?

a[href*="#"]:not([href="#"])
Above selector is gone target a tag with href="#smthing". So by default its gone effect bootstrap tab functionality.
Instead of that increase css specificity.
Use parent class like
$(function() {
$('.myParent 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;
}
}
});
});

jQuery smooth scrolling on whole body instead of DIV

This website has a div with smooth scrolling:
http://fatlinesofcode.github.io/jquery.smoothwheel/demo/smoothwheel.html
But how can I make this smooth scrolling on the whole body instead of a div?

You can use something like 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;
}
}
});
});
And it will smooth scroll the whole page, instead of particular div. The main crux of this is:
$('html,body').animate({
scrollTop: ...
}, 1000);
For more information, have a look at the article: Smooth Scrolling.

If you are planning on using the jQuery extension that you referenced: Looking through the source code you can just call the smoothWheel function on the document instead of the div.
(https://fatlinesofcode.github.io/jquery.smoothwheel/src/jquery.smoothwheel.js)
Initialize:
$(document).smoothWheel()
Disable function:
$(document).smoothWheel({'remove':true})
DEMO:
https://jsfiddle.net/SeanWessell/0omtkbvt/

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;
}
}
});
});