I'm trying to learn animated scrolling with jQuery on a portfolio website. I think this should work in theory but my buttons still just 'jumps' to its href instead of scrolling.
The javascript is enclosed in the $(document).ready(function() {}) thing:
$('a[href*="#"]:not([href="#"])').click(function() {
var target = $(this.hash);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
</div>
I'm hoping that this would scroll to my section with those ids instead of jumping.
Use preventDefault() to stop default ahref action first and it should be fine
// added e parameter to click callback
$('a[href*="#"]:not([href="#"])').click(function(e) {
// use prevent default function
e.preventDefault()
var target = $(this.hash);
if (target.length) {
$('html, body').animate({scrollTop: target.offset().top}, 1000);
}
});`
You are activating default action of the <a> tag so browser have no time to animate scroll because you are there already.
You can try following.
$('a[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
if (target.length) {
$('html, body').animate({scrollTop: $(target).offset().top}, 1000);
}
});
Related
This is a single-page website currently I am working on. But When I click another link in the navbar it's not changing color though hovering is working perfectly. Here is my html code :
<html>
<body>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item ">
<a class="nav-link scroll active " aria-current="page" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About Us </a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#">Products</a>
</li>
</ul>
</div>
</html>
</body>
enter image description here
Here is my css:
<style>
.navbar .nav-item a {
color: #5cbf8f !important;
}
.navbar .nav-item a:hover {
color: #028b77 !important;
}
.navbar .nav-item a.active {
color: #028b77 !important;
}
</style>
enter image description here
Here is my Js :
<script>
$(document).ready(function () {
var scrollLink = $(".scroll");
// Smooth scrolling
scrollLink.click(function (e) {
e.preventDefault();
$("body,html").animate(
{
scrollTop: $(this.hash).offset().top,
},
1000
);
});
// Active link switching
$(window).scroll(function () {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function () {
var sectionOffset = $(this.hash).offset().top - 20;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
}
});
});
});
</script>
enter image description here
N.B: Don't really know about js, just found it on the internet.
Navbar:
enter image description here
I think your js is wrong.
$('.active').removeClass('active');
$(this).addClass('active');
More efficient options are available if the DOM hierarchy is known.
For example, if they're all siblings, you can use this:
$(this).addClass('active').siblings('.active').removeClass('active');
So this is what I have as my top nav bar. I'm using this along with jquery
<nav>
<div class="brand">BRAND</div>
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="about" href="#about">About</a></li>
<li><a id="buy" href="#buy">Buy</a></li>
<li><a id="contact" href="#contact">Contact</a></li>
<li><a id="login" class="active" href="#">Log In</a></li>
</ul>
</nav>
and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
but it isn't working?
You have to put the id to thelement you want to scroll to not the link itself
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="brand">BRAND</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Buy</li>
<li>Contact</li>
<li><a class="active" href="#">Log In</a></li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="home">
example
</div>
You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.
Place id="…" on the element that you want to scroll to, not the link.
sorry if this question has already been answered. I've tried searching for other answers but still couldn't solve it. I'm new to jQuery..
So, I have a navigation menu and I want that it's list items, on click, go to a specific div.
Here's my code:
HTML
<div class="overlay" id="nav-overlay">
<nav class="overlay-menu">
<ul>
<li ><a class="nav-link" href="#" data-target="intro">Home</a></li>
<li><a class="nav-link" href="#" data-target="about-section">About</a></li>
<li><a class="nav-link" href="#" data-target="hero-section-1">Projects</a></li>
<li><a class="nav-link" href="#" data-target="contact-section">Contact</a></li>
</ul>
</nav>
</div>
And Jquery:
// Scroll to div
$(document).on('click','.nav-link', function(event) {
event.preventDefault();
var target = this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
When I click on the links nothing happens, and in my console i get this error:
Uncaught TypeError: Cannot read property 'top' of undefined
Any help will be appreciated :)
you need to pre-fix the target with its selector:-
// if the target is a class
$('.' + target).offset().top
// if the target is a id
$('#' + target).offset().top
HTML :
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
JS :
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
switch ($(this).children(":first").attr("href")) {
alert(3);
case "#tab1":
});
Here I am unable to recieve the click event . Looks like I am making some mistake. Can someone show me the right way.
Because the JS is loaded first the DOM is not ready yet so it could not find the Mydatatabs list, you should put your code inside ready function :
$(function(){
//Your code here
})
Hope this helps.
$(function(){
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
So, first you have to put your jquery code inside a document ready statement. See the example:
$(document).ready(function(){
//... code
});
This is to be certain that the element to which the .click() event is bound has been created when the function executes.
For further explanation, look this response: Why should $.click() be enclosed within $(document).ready()?
And is not missing any end curly braces in this click event? In between switch case and end of the function?
I am trying to add some text on the top left corner of my nav bar. Upon click, I want the page to automatically scroll back up to the top of the page
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<a id="logo" href=".navbar">LOGO HERE</a>
<ul id="nav_pills" class="nav nav-pills" role="tablist">
<li role="presentation">
<a id="test" href="#services">Services</a>
</li>
<li role="presentation">
About
</li>
<li role="presentation">
Portfolio
</li>
<li role="presentation">
Team
</li>
<li role="presentation">
Contact
</li>
</ul>
</nav>
My JS so far:
$(document).ready(function() {
// easing scroll bluhd
var hrefObjects = $("li a");
hrefObjects.push($(".welcome-btn"));
hrefObjects.push($("#logo"));
hrefObjects.each(function() {
$(this).on("click", function(e) {
var mode = "easeInOutQuart";
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 750, mode);
});
})
});
I am currently getting this error and I am not sure how to fix this.
Uncaught TypeError: Cannot read property 'top' of undefined
.push() is not a valid jQuery function. hrefObjects is a jQuery object, not an array.
Simplify it to:
$(document).ready(function() {
$("li a, .welcome-btn, #logo").on("click", null, function(e) {
$('html, body').animate({ scrollTop: 0 }, 750, "easeInOutQuart");
return false; // prevents default
});
});
This is really easy to do, using the jQuery animate() method. Here's an example of how you could do it - very simple.
$(document).ready(function(){
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
.scrollToTop{
font-weight: bold;
text-decoration: none;
position:fixed;
top:0;
left:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Company Name
Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>
Hope this helps, and comment below if I can help you further.