I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?
For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});
I have a one page design and want to have an auto scroll effect when a nav link is clicked. Not sure why the scrolling effect is not working. I added the alert function to see if $(sectionID).offset().top is returning a value and it is. So if someone can explain the problem it would be greatly appreciated.
jsfiddle: https://jsfiddle.net/8t881403/
html:
<div class="sub-nav">
<nav>
<ul>
<li>Mission</li>
<li>Why CS</li>
<li>Learning Experience</li>
<li>Spartan Success</li>
</ul>
</nav>
</div>
jquery:
$(function() {
autoScroll();
});
function autoScroll() {
$('.sub-nav a').click(function (e) {
e.preventDefault();
var sectionID = $(this).attr('href');
alert($(sectionID).offset().top);
$('html body').animate({ scrollTop: $(sectionID).offset().top
}, 1000)
})
}
var div = $('.sub-nav');
setInterval(function(){
var pos = div.scrollTop();
div.scrollTop(pos + 2);
}, 200)
When You click on button, page should scroll down, to div with id="myTarget".
here is my HTML:
<button class="go"> GO </button>
<div id="myTarget">
<p>
la lalal lalala lalala
</p>
</div>
and jquery:
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
My problem is that when you click a few times on button, page scroll down. After that you can't scroll up. Is any way to stop click event while page moving?
JsFiddle
And if you stop the animation when user mousewheel?
$(function() {
$(".go").on('click', function(event) {
event.stopPropagation();
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000);
});
});
var page = $("html, body");
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
Demo
What about disabling the button while it is running and enabling it again once animation is done?
$(function() {
$(".go").on('click', function(event) {
var $but = jQuery(this);
event.stopPropagation();
$but.attr("disabled", true);
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000, "linear", function(){
$but.removeAttr("disabled");
});
});
});
I assume you mean that if you rapidly click the button a couple of times it'll scroll down and not let you scroll back up, and not that it doesn't work when you "Click Button, Scroll Down, wait, Scroll Up".
If it's the first case, you can fix it like this.
$(function() { $(".go").on('click', function(event) {
event.stopPropagation();
$(".go").attr("disabled", true).delay(3000).attr("disabled", false); $('html, body').animate({
scrollTop: $("#myTarget").offset().top
},
3000);
});
});
This means that when you click on the button, it will be disabled for 3000 milliseconds (the time of your animation. This should stop a user from being able to click on it and trigger the animation more than once while it's animating.
The issue is that your animation is getting appended onto the previous animation for the html and body tags. Thus, you have to wait for all of the animations that have been started to die before you can scroll back up.
Things that you can do about this problem
Make the duration of the animation smaller
Call stop() on the elements you are animating before creating the new animation
Call stop() if the window is scrolled. This solution could be problematic if you ever have the body tag doing other animations. The first two solutions should be enough, anyway.
The first should be self explanatory and the second is very easy:
$(".go").on('click', function(event) {
event.stopPropagation();
$('body').stop().animate({
scrollTop: $("#myTarget").offset().top }, 500);
});
You also only need to animate the body element (not the html element).
JSFiddle Example
Use a scrolling state, like so :
$(function() {
//global var
isScrolling = false;
$(".go").on('click', function(event) {
event.stopPropagation();
if(!isScrolling) {
isScrolling = true;
$('html, body').animate({
scrollTop: $("#myTarget").offset().top }, 3000,
//Only when it's completed (callback)
function() {
isScrolling = false;
}
);
}
});
});
Your problem is that it keeps trying to scroll down even though you are already down.
I was exercising in creating a simple Back-To-Top button that activates when scrolling the page after a certain amount. This is the jQuery
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(200);
} else {
$('.back-to-top-button').fadeOut(200);
}
});
});
/*Scroll Plugin*/
$('.back-to-top-button').click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
and this is how I placed it in the HTML
<a href="#" class="back-to-top-button" style="display: inline;">
<i class="fa fa-chevron-circle-up"></i>
</a>
Problem is, it won't scroll up, instead it just jumps on top. I can't find any solution on the web, as it seems it does this only on my site, and everytime I try it on other websites it works.
It now works. I've declared the event handler inside the document ready function
$(document).ready(function () {
var offset = 250;
var duration = 300;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(duration);
} else {
$('.back-to-top-button').fadeOut(duration);
}
});
/*Scroll Plugin*/
$(".back-to-top-button").click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
});
I'm a jQuery novice. I have two functions on the same page:
one which is a smooth scroll to an ID
the other which shows a "back to top" element after the user scrolls a set distance.
The functions work on their own, but when I combine them as shown below, the "back to top" function doesn't work.
I think I'm missing something obvious and could use some help.
Thanks!
Update: This fiddle shows the problem:
back to top jsfiddle
If the smooth scroll block is disabled, the back to top function works.
jQuery(document).ready(function(){
//smooth scrolling
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
window.location.hash = target;});
});
// Show or hide the back to top footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
});
Hi #DavidCara Just add
<div id="top"></div>
after immediate <body> tag it'll defiantly work.
See updated jsfiddle Here
Use this simple code in html tags directly.
<a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>