I am creating a navigation so that when I click on my a tag it scrolls to the element it's selected to. But how should I do it so that it animates when it goes
from:
Home
to:
<div id="Home">
<h2>HOME</h2>
</div>
I would like if it could be something with jquery.
Reference: Smooth Scrolling
$(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;
}
}
});
});
Feel free to change the speed of the animation, which is currently set to 1000ms (one second) to whichever value you like. Keep in mind that this code will affect all anchor tags which reference an element with a matching id on your HTML document.
You can do something like this with Jquery
$("a").click(function() {
$("html,body").animate({scrollTop: $("#home").offset().top});
});
You can do it like this:
JS Fiddle
var links = $('#links a');
links.on('click', function(e){
e.preventDefault();
var theHREF = $(this).attr('href'),
sectionTop = $(theHREF).offset().top;
$("html, body").stop().animate({scrollTop:sectionTop}, 500);
})
Related
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;
}
}
});
});
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/
I have a smooth scroll code which works great, the problem is it works too well. I have other elements that use "#" is the tag(example: but I don't want the tabs to be targeted by the smooth scroll. I have the following smooth scroll code:
jQuery(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
}, 1000);
return false;
}
}
});
});
Is there anyway to modify this to only target the anchors for the page an not tab anchors
If you do not want to affect links with # as href value the syntax you should use looks like this:
$("[attribute!='value']")
So in your case you specify href as attribute and # as value.
$("a[href!='#']").on('click', function(e){
e.preventDefault();
//do stuff
});
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>
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;
}
}
});
});