Smooth scroll not working (JavaScript) and some Errors - javascript

Good day. I found this error while I'm working on my project. Yesterday, I used javascript inside the html file and it's working fine but when I made it as an external script and linked to the index.html, the smooth scroll doesn't seem to work on some links to the section. Here's the error below:
smoothscroll.js:16 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (smoothscroll.js:16)
at HTMLAnchorElement.dispatch (jquery.min.js:2)
at HTMLAnchorElement.y.handle (jquery.min.js:2)
It works fine on links such as and the likes, but when it comes to the navigation bar that links to the section of the same page, it produces that error above in the console.

$(hash) element is not found.
Example: Link if there isn't an element with id something is not found then it'll error out. You need to only perform the scrolling when the element exists.
$(document).ready(function(){
$("a").on('click', function(event){
if (this.hash){
event.preventDefault();
var hash = this.hash,
element = $(hash);
if(element.length){ //check if the element exists before doing the scrolling
$('html, body').animate({
scrollTop: element.offset().top
}, 800, function(){
window.location.hash = hash;
});
}
}
});
});

Related

jquery unrecognized expression div

I have a Syntax error, unrecognized expression. I use a set of links to change to a div on the same page and sent a variable with it.
Voorpagina
Updates
Over mij
$taal is the language the user choose, like NL, EN…
After the user clicks, get this in action:
$('a').click(function (e) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top}, 500);
});
Everything works but I get the next error in my console:
Uncaught Error: Syntax error, unrecognized expression: ?taal=nl#Updates
at Sizzle.error (jquery-3.6.0.js:1681:8)
at Sizzle.tokenize (jquery-3.6.0.js:2381:11)
at Sizzle.select (jquery-3.6.0.js:2842:20)
at Function.Sizzle [as find] (jquery-3.6.0.js:898:9)
at jQuery.fn.init.find (jquery-3.6.0.js:3099:11)
at new jQuery.fn.init (jquery-3.6.0.js:3209:32)
at jQuery (jquery-3.6.0.js:161:10)
at HTMLAnchorElement.<anonymous> (?taal=nl:175:24)
at HTMLAnchorElement.dispatch (jquery-3.6.0.js:5430:27)
at elemData.handle (jquery-3.6.0.js:5234:28)
How can I resolve this error? By the way, if I remove the <?PHP echo $taal; ?> variable in the links above (first code), the error is gone but I need that variable for further navigation.
I’ve tried to rebuild the code, removed $taal and the error was gone but I need that variable.
Thanks in advance.
You are using the whole url, you want to just use the hash portion.
$('a').on('click',function (e) {
e.preventDefault();
console.log(e.target.hash);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A
B
C
You need a selector as the argument to $(). The selector is after the # in the href, e.g. #Home or #Updates. You need to extract that from the href attribute.
$('a').click(function (e) {
let href = $(this).attr('href');
let target = href.split('#')[1];
$('html, body').animate({
scrollTop: $(`#${target}`).offset().top}, 500);
});
});
I've fixed the issue. In the code do I check now if $taal exists or not. If not, then I use my old jQuery link code, the code on the top of this page. If $taal does exist, then I split the URL variables and do I use Barmar's code. Thanks for all your help.

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.

Smooth scrolling on BS4 fixed navbar with scrollspy

WARNING: I'm new to JavaScript.
I am developing a site for a family member and I've stumbled upon a problem. I am using Bootstrap 4 for the site, and therefor their navbar framework. The navbar is fixed to the top, and uses ScrollSpy to highlight the active section.
I am using this code from W3 to have my Nav links slowly scroll down the page to a section.
$(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(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
No luck. My nav links nolonger work, and I get these nasty console errors
master.js:15 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (master.js:15)
at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)
I know what you're thinking, master.js is sourced before jQuery. Nope!
I would appreciate any help I can get on this.
See the answer here: jquery : $().animate() is not a function
You appear to be using the slim build of jQuery 3.2.1, which doesn't
include most of the library. Instead, you should be using the full
version.
https://code.jquery.com/jquery-3.2.1.js

Horizontal scrolling buttons for mousewheel

i have developed a web solution which uses mousewheel js in order to apply horizontal scrolling. You can view the web site's page here. DEMP REMOVED
As you can see, i'm trying to simulate a mouse scroll on a click of a button, Currently i'm using this jquery snippet
var scrolled=0;
$("#btnRight").on("click" ,function(){
scrolled=scrolled+300;
$('html, body, *').scrollRight(scrolled);
});
var scrolled=0;
$("#btnLeft").on("click" ,function(){
scrolled=scrolled+300;
$('html, body, *').scrollLeft(scrolled);
});
the moment on these events are triggered, an error is produced.
Uncaught TypeError: Object [object Object] has no method 'scrollRight'
is this due to me targetting the entire body ? or is it not due to targetting a specific div ?
can the experts please be kind to provide me a hint or a elegant solution? Thank you.
There is no scrollRight function.
Use scrollLeft but have scrolled=scrolled-300 instead

Can't Get Header to Resize When Scrolling Down Using JQuery

Have been trying to reduce the size of my header on scroll using the info from here:
jQuery - Sticky header that shrinks when scrolling down.
However, while the header stays fixed, it's not shrinking when I scroll down.
This is what I have in my js file:
$(function(){
$('#header').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header').data('size') == 'big')
{
$('#header').data('size','small');
$('#header').stop().animate({
height:'40px'
},600);
}
}
else
{
if($('#header').data('size') == 'small')
{
$('#header').data('size','big');
$('#header').stop().animate({
height:'120px'
},600);
}
}
});
Can someone help me figure out why it's not working?
I'm using the latest Wordpress and have enqueued the script in my theme's functions file - don't know if this info helps, but just wanted to give as much info as possible to get my issue resolved.
Took a quick look at your site and attempted to create a simple function to perform the desired change...
$(window).scroll(function(){
if($(window).scrollTop > 0){
$('header').css({
height:"40px"
})
}
else{
$('header').css({
height:"120px"
})
}
})
I did this using scratchpad on FF and received an error that, to my mind, implied that jquery wasn't loading in the first place!
Try adding the following line to you html head section.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The console is throwing an error:
Uncaught TypeError: Property '$' of object [object Object] is not a function
I'd try enclosing your code in -> jQuery(document).ready(function ($) { }
*the important part is the $ inside the ().
jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

Categories