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.
Related
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.
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() {
...
});
As the title says I want to make the page scroll to a specific element on the page when the user clicks a text/image. If it's possible, I don't want it to just skip to that element, but have a scrolling animation to it.
I know it's possible to do in JS, but I forgot how you do it.
Depending on your specific needs you can organise the code in such way, so that you can pass the id of the element that needs to be scrolled to the click handler.
Click me
<div id="scrollHere"></div>
$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
This will scroll the page to #scrollHere element over a period of one second (1,000 milliseconds = 1 second).
Or in a more generic way:
$('.someElement').on('click', function(event) {
var target = $('#someElementToScrollTo');
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
});