We Keep Coding

Smooth Scroll Won't Work on Bootstrap 4 Website

I added IDs and the smooth scroll effect won't work. It doesn't even scroll up to the ID that I assign it. I tested it in a test HTML file and it worked. I thought it was because some of my responsive elements didn't have fixed heights, but when I gave them fixed heights, it still did not work.
I tried to copy and paste my code. However, it said I have formatting problems no matter what I did. So I created a pastebin link: https://pastebin.com/raw/dfQS9RUA
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
alert("SCROLL CODE RUNNING");
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
Click Me to Smooth Scroll to Section 1 Above
I found that I get this error in the console:
index.html:30 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (index.html:30)
at HTMLAnchorElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLAnchorElement.v.handle (jquery-3.4.1.slim.min.js:2)
This implies that I do not have the right version of JQuery installed, but when I make the CDN the uncompressed version or the slim version, it still does not work.
This is the CDN of JQuery I am using:
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>

https://codepen.io/tmoses/pen/zYvzZmo
https://code.jquery.com/jquery-3.4.1.min.js
Change the above in your bootstrap scripts, and remove the other. For some reason the slim version didn't load the animate function, but it works with just the minified version. It also appears the "integrity" attribute was causing it not to load properly. Try not to combine several versions of jQuery in one document.

Scroll link to another page's section smoothly

I have index.php which has different sections like top,service,aboutus andcontactus .I have my header.php in includes folder and I include it to each and every files separately.I added jquery for smooth scroll for sections.
Now I have gallery.php which has the same header.Now I want to call each and every section from gallery to index/section. So I changed the href="#service" to href=index.php#service.Now it works from both index and gallery pages.
Problem:
The smooth scroll on works if I call the section from index.php. When I call a section from gallery.php it just load the upper part of index.php and suddenly moves to the called section.I want it to move smoothly.How can I make it happen?
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});

Your code look good but you have to make footer.php and call function from footer.php so that your problem will reslove.
As i use we have to call all jquery related things from footer but its depend on your requirements so in that case you can call from footer.php

ScrollTo: targeting specific buttons in a navbar

Got an issue with a navbar I'm creating for a WordPress site. Some of the links are meant to scroll down to different places on the homepage and some are outside links to other places on the site. Something like this:
<div class="main-navigation">
<ul>
<li class="link1">Link 1
<li class="link2">Link 2
</ul>
</div>
Basic stuff.
So if I add the following Javascript in the footer....
jQuery(document).ready(function() {
jQuery('.main-navigation a' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
Link 2 will scroll down but since Link 1 isn't supposed to scroll, if you click on it, nothing happens like it's a null link.
I thought I could change the reference to something like
jQuery('.main-navigation a.link2' ).click(function(){
So only link 2 does the scrolling, but that just makes it jump to the page like an old anchor tag trick in the 1990's.
Tried a few variations of the same idea, and nothing clicked. Anyone know what the right code would be to target just the buttons that need to have the scrolling?

Building from itsgoingdown's answer. The animation is ignored because the default link event still fires. If you pass the event and also prevent the default, you'll be set. See below.
$(document).ready(function() {
$('.main-navigation a[href^="#"]' ).click(function(event) {
// Prevent default link action
event.preventDefault();
// Grab location to send to
var href = $(this).attr('href');
// Scroll the page, animated
$('html, body').animate({
scrollTop: $(href).offset().top
}, 700);
});
});
Here is a live JSFiddle to show as well.
https://jsfiddle.net/y3nutj22/5/

Thanks to the both of you. I finally figured it out and in a sense, you're both right. However, neither of your codes produced the scrollTo effect. While '.main-navigation a[href^="#"]' was partially correct, my issue....and I finally realized it this morning....was I hard coded in the URL's in WordPress' menu feature as a complete URL. So just using '#' wouldn't work. Also, since it's WP, I can't use $'s in the code, Have ot use jQuery, of course.
This is the code that did the trick.
jQuery(document).ready(function() {
jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
with path.to.url representing the actual URL, of course.
Thanks again!

Linking within the page

I have seen a lot of websites where they are linking in the same page.
(demo)
The problem in this system is, when you reload the page after clicking the link (which refers you to the selected area), the page immediately scrolled to the selected area, because the click on the link leaves a #name on the URL page (even when reloading), for example:
www.example.com/#down
I have seen also websites, where they don't add #name to the URL line but you still referred to the linked area.
I guessed this has been made by jQuery or Javascript but I couldn't find (inspect element and page's source) the code (I found this system in high-tech sites, where they have a lot of js files and it was complicated to find).
My real question is: how can I link within my website, without using the hash-tag|name system?

The behaviour you describe is the intended, desired behaviour of anchors. As has been said...
Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.
You can have an event listener detect clicks on links and scroll accordingly. jQuery would be something like this:
$(document).on("click", "a[href*='#']", function(evt) {
evt.preventDefault();
var target = this.href.split("#")[1];
var elm = document.getElementById(target);
if( elm) elm.scrollIntoView(); // or replace with fancy scrollTo plugin
});
However, be aware that doing this decreases usability. From xkcd...

Working DEMO
HTML:
GO SEE THE DEMO
jQuery:
$("a").click(function(event) {
event.preventDefault();
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top
}, 500);
});

Tweak smooth scrolling code

I am trying to learn jQuery and I'm having a mental blank at the moment. The following code scrolls my page to the top with a smooth transition, but I would like this smooth transition to work for all anchor/ID links on my site (it's only a one pager).
$(document).ready(function() {
$('a[href="#the-top"]').click(function (e) {
$("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
return false;
});
});
How can I change my code to achieve this?

jQuery(function($) {
$('a[href^=#]').bind('click', function (evt) {
var $what = $('#' + $(this).attr('href').split('#')[1]);
$('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
evt.preventDefault();
});
});
Changes suggested in this code:
Change global $ object to jQuery
Just jQuery(fn) as document.ready(fn)
Closure: use jQuery as $ inside that function
Prevent default event from anchor instead of return false (source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
Use of $what asking for the #something part of anchor href, in order to prevent misbehaviors in IE (because if you have href="#some" sometimes it become href="http://yoursite.com/yourcurrentpage/#some instead)
All of these are kind of optional. You get the idea. Feel free to change.
DEMO AT: http://jsfiddle.net/Nm3cT/

Take a look at Chris Coyier's smooth Scrolling script. It does exactly that and needs no further configuration. Plus, it updates the address on the browser.