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
});
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
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.
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!
}
});
I'm currently working on a site which uses the javascript code below to animate over to the target element inside an href. How would I go about getting the code to animate when the back/forward buttons are clicked based on it's history.
/* ------ Smooth Scroll ----- */
$(document).ready(function() {
"use strict";
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
var target = $(this).attr("href"); //Get the target
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({ scrollTop: $(target).offset().top}, 2000, function()
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
You need to listen for the hash change. There are many ways to do this. You can poll for hash change or use HTML5's history api with onhashchange method to listen for changes. The easiest way to do this is probably using some kind of library that already takes care of both. I recommend jquery plugin if you are using jquery. If you are using angular js or other stuff then look for those plugins.
You would do something like
$(window).hashchange( function(){
// Do the animation here
})
You would no longer need to animate on a click.