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() {
...
});
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.
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;
});
}
});
});
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.
After a user preform a certain action, the page reloads and it adds a #someId to the URL so the URL will be something like localhost/panel/mypage.php#someId and as a default action, the browser will jump to an element with the id of someId.
What I would like to do is to catch that using jQuery and then instead of jumping right to the #someId element, jump 100px above it and have the ability to add a smooth scrolling.
Is that possible?
There is this hashchange event of the 'window' Document Object that's exactly what you require to catch this behavior. You can use:
Javascript solution:
window.addEventListener('hashchange', function(){
// smooth scroll code
});
jQuery solution (v1.8+):
jQuery(window).on('hashchange', function(){
// smooth scroll code
});
Note: The hashchange event gets triggered on url hash change (location.hash) on the same page but not from a different page e.g. going from www.example.com/about.html#first to www.example.com/contact.html#second won't trigger the hashchange event.
This should get you started:
var a_hash = window.location.hash;
var offset = $(a_hash).offset();
if(offset.top > 100){
offset.top = offset.top - 100;
}
var body = $("html, body");
body.animate({scrollTop: offset.top}, '500', 'swing', function() {
});