I am new to Jquery so for now I try to use already made code and understand it.
I was using a smooth scroll code but it prevents me from leaving the page if I don't remove
event.preventDefault();
However, if I do remove it it goes blank for a third of a second because it goes to the anchor and then executes the scrolling.
Here is the code:
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== ""){ //here is my problem I think
//Prevent default anchor click behavior
event.preventDefault(); //here is what makes me unable to leave page
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
} // End if
});
});
What I wanted to do was :
if(this.hash !== "" && this.split('#')[0] != location.split('#')[0])
But then the code just doesn't execute, I tried several other way, but as soon as I try to manipulate 'this', even if I put it in an other variable and then manipulate the variable, it won't work.
So, how do I access other pages with the "event.preventDefault()"?
Thank you
You can change that if statement to this...
if (this.hash !== "" && this.href.split('#')[0] != location.href.split('#')[0])
And that should work.
Related
I've searched hours and finally found a light jQuery code which allows me to animate the click of an anchor link, but when I click on one link it animates down and then jump 100px to the top without animation because the hash is given to the url after the animation which leads to the default anchor link behavior when you click it.
I have a code sample for you with a little comment from me for a fix, or well I thought It'll be a fix...
// Scroll.js (https://css-tricks.com/snippets/jquery/smooth-
scrolling/#comment-1635851)
/*
* Scroll.js:
* 1. added -100 after the .top property which reflects the navigation height.
*/
$(document).ready(function(){
// Add smooth scrolling to all links
$('a').on('click', function(e) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
e.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-100 // /* [1] */
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Just write on the anchor href attribute javascript::void(0) as in
Though if you want it to act as an anchor and have a url... this will not work :(
I have a code for make a smooth scroll with an anchor link, but what I want is make a fixed link on the window height and jump between each section available in the page. My link says Scroll to know more. When the user make click, it must to go to each section. My code so far is:
$("#over_scroll_text 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
scrollTop: $(document).height() - $(window).height()
//}, 800//, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
});
//} // End if
});
No idea of what can I do from here. Any help?
Line 9, 16, and 19 shouldn't be commented out
It's a simple window scroll that triggers when the user clicks on a nav item but for the life of me I cant seem to figure out why FF wont recognise it, I've read a similar Q&A's but they only recommend defining var's first which I've done, any help would be appreciated.
Heres the code:
$("#myNavbar a").on('click', function(){
var hash = this.hash;
//make sure this.hash has a value
if (hash !== ""){
//prevent default anchor click behavior
event.preventDefault();
//use jQuerys animate() method to add smooth scroll
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
} // end of if
});
This "works" in Chrome because Chrome implements the non-standard Window.event property.
As noted in the comments, you should use the event argument that is provided by jQuery event handler instead.
$("#myNavbar a").on('click', function(event){
...
event.preventDefault();
...
});
I am writing code for when a button is clicked it will animate going to a certain spot on the page. The problem is the first time I execute the code it is very laggy on the scrollTop animation. I am using w3schools code so I was surprised it was not working.
Here is the code I am using to animate the scrolling:
// 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 (400) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
I have a fixed navbar that hides when a user scroll down; and appears when they scroll up. This works fine.
It is a single page scroller site.
The problem occurs when a user clicks a nav item, and they are subsequently scrolled down the page, the fixed nav disappears. I would like this to stay put when the nav item is clicked, until the user scrolls down themselves with the mouse wheel or scrollbar.
My approach this far has been to set a variable to determine if it is programmatic scrolling or not. I use that variable to determine if the nav should hide or not as a conditional statement.
window.programScrolling = false;
The nav item click function is as below, which sets the var to true.
$('a[href^="#"]:not([href="#"])').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'easeInOutCubic', function () {
window.programScrolling = true;
});
});
This code does indeed work. But only once as now the variable is always true.
I need a way to reset that variable back to false when the user does the scrolling.
I have tried setting on the scroll event
$(window).scroll(function(e) {
window.programScrolling = false;
});
But this seems to take precedence over the click event and hence that variable is now always false.
Any suggestions? Or alternative approaches?
If by $(window).scroll is taking precedence you mean it is called second, you can use this code:
$(window).scroll(function() {
if (programScrolling)
window.programScrolling = false;
else{
//User initiated scroll!
}
});