This question already has answers here:
Difference between .on('click') vs .click()
(12 answers)
Closed 5 years ago.
$(document).ready(function(){
// Add smooth scrolling
$('.button').children().onclick(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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
$(document).ready(function(){
// Add smooth scrolling to all links
$('.button').children().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
}, 1000, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
When i use onclick() function, on clicking the button there is no scrolling effect; it only jumps to article without any scrolling effect.
But when I use on('click',function()) there is a scrolling effect.
what is the difference between these two?
.onclick() is a javascript function
.click() and .on("click") are jQuery functions, and jQuery added some more features to its functions.
Related
I made the menu sticky, but the problem that i have now it's that menu does not allow me to see the title of the categories.. you can see it here
http://jisparking.cl
i'd like to know how I can move the scroll animation a little top to avoid
that the menu is over the category title..
My code is this:
$(".nav li 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
});
Thanks!
You could simply subtract a value from scrollTop: $(hash).offset().top, like scrollTop: $(hash).offset().top - 50
Of course this would break the first link as it would give a negative value. A possible solution is
scrollTop: Math.max($(hash).offset().top - 50, 0)
(if the value is negative Math.max will return 0 instead)
This to make as little changes as possible to your code, but I think there could be other ways to achieve what you are trying to.
Thanks for every one who helped me so far. There is another problem related to JS. Can anyone with advance knowledge, help me to fix this error? My website has both smooth scroll effect and, image filter with JavaScript. But smooth scroll function prevents the functionality of image filter function. I cannot upload complete html css and JavaScript codes because this website prevents it. So I will upload the JavaScript code. Please look at this and help me to fix it.
// ISOTOPE PORTFOLIO WITH FILTER
if(isExists('.portfolioContainer')){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
}
$(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 !== "#portfolio") {
// 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
}, 400, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Have you tried to following?
$('html, body').animate({
scrollTop: $(hash).offset().top
}, {
queue: false,
duration: 400
}, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
I have added the queue:false option to your last animate function. This is enabled by default.
Update:
Can you check out this fiddle? I'm currently trying to re-create your working situation. Does the fiddle looks like your working environment?
What I already found out is, that $("a").on('click', fun... is also called / triggered when pressing a isotop filter button.
I have a one Page site with scrolling Nav. When I click a link it adds an active class to the button but also a delay for the scroll effect.
This delay also stops the active class from immediately showing
I've tried to put them in separate functions and with different selectors but I can't seem to take the delay off the active class.
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
$('.navbar a').removeClass('active');
$(this).addClass('active');
// 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
});
This gives a delay to the active class on Desktop - which I can live with.
But on mobile it doesn't show the active class until the dom is clicked.
So the Dom Click showing active class is because Bootstrap auto adds a background on a:hover or a:focus - requiring a dom click to apply the active background color.
However I still don't know how to stop the delay of the scroll affecting the delay of the active class.
I have a code snippet from the W3 schools that creates a smooth scroll function to anchor tags within a page. It does this dynamically by looking for anchors that have hashes in it, and I would like to keep it this way without having to add classes etc. The issue I'm experiencing is when the script appends the URL to include the anchor id, it breaks the top offset. How can I append this code to prevent that from happening?
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top-125
}, 1000,
function(){
window.location.hash = hash;
});
}
});
});
I have smooth scroll JS to link from a menu item to an anchor further down the page.
The problem is that since I have tabs used on my page (which use #tabname) to navigate, it tries to scroll when using them as well.
Is there an easy change I can make to the JS to prevent this from working on tabs?
$(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
});
});
You could provide a way for anchor elements to opt out of the scroll behaviour, e.g. filter out anchors with a data-no-scroll attribute:
<a href="#tab1" data-no-scroll>Tab1</a>
$("a").not("[data-no-scroll]").click(function() {
...
});