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.
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.
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.
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() {
...
});
Consider the following JS code:
<script type="text/javascript">
$(function() {
// Check if landing on the page with a hash
if (window.location.hash.length) {
$('html,body').animate({scrollTop: 200}, 100);
return false;
}
// Same-page anchors
$('a[href*=#]').click(function() {
// ... find the target based on the div and animate the scrollTop property again
}
});
});
</script>
What it does is first check if landing on a page with an #anchor or if the user is clicking an same-page #anchor and simply animate to the target div with the corresponding id.
The problem is that these 2 work alternatively: if you land on a page with a hash symbol the page will animate to the div ID, but the subsequent same-page links won't be intercepted by the bound 'click' event (I've also tried binding it with live(), no difference)
If you land on the page with a clean URL, the links will work again. What am I doing wrong?
Why do you return false? That does not make any sense, because in a "ready" event handler, there is no default behavior that can be prevented or a DOM tree that will be bubbled up. Plus it prevents the following statements from being executed (specifically the binding of the event handlers to the links).
if (window.location.hash.length) {
$('html,body').animate({scrollTop: 200}, 100);
return false; // <-- remove this line!
}
here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian
I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });