I have this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>
Related
I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.
Solved with queue: false; after the code.
Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
I need jQuery animate together with scrollTop to create a smooth scroll effect to my anchor links. In my current project this is not working. All the animate - scrollTop Events are doing nothing. I load jQuery 3.1.1 in the header. In my footer main.js i use the the following javascript:
$('a[href*=#]').on('click', function(event){
console.log("ScrollTop");
$("html, body").animate({ scrollTop: 500 }, "slow");
return false;
});
I can see the ScrollTop in my Console but there is no animation. I dont know what to do i tried a lot of things. I also tested it in all the different browsers its working nowthere.
The issue is that your selector with href contains # gives a different meaning without the quotes. Once you put # in quotes, it works fine.
$('a[href*="#"]').on('click', function(){
$('html,body').animate({scrollTop: 500}, "slow");
});
Example : https://jsfiddle.net/3vy7adh7/
Or
If you want to avoid the post on any valid a tag,
$('a').on('click', function(e)
{
e.preventDefault();
if($(this).attr('href').indexOf('#') > -1)
$('html,body').animate({scrollTop: 500},"slow");
});
Example : https://jsfiddle.net/3vy7adh7/1/
This should work for you:
$('a[href^="#"]').on('click',function (e) {
var href = $(this).attr('href');
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 180
}, 900, 'swing', function () {
window.location.hash = target;
});
});
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 have code like this:
JavaScript
$( document ).ready(function() {
$("a.link1").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link1").offset().top
}, 2000);
//});
});
$("a.link2").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link2").offset().top
}, 2000);
//});
});
$("a.link3").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link3").offset().top
}, 2000);
//});
});
});
Body of HTML:
<div id="menu">
LINK 1
LINK 2
LINK 3
</div>
<div id="content">
<a name="link1" id="link1"></a>
<!--some text-->
<a name="link2" id="link2"></a>
<!--some text-->
<a name="link3" id="link3"></a>
<!--some text-->
</div>
Please help me with this:
Stop doesn't seem to work the way I wanted. I want to somehow stop previous rolling when another link is activated.
Is there any way of generalization of the jQuery part. I have more than 3 menu links and I don't want to make a special function for each.
Thank you very much for your help.
Gomi
You can generalize by extracting the click callbacks to a common function:
var linkClickCallback = function(selector){
$('html, body').stop().animate({
scrollTop: $(selector).offset().top
}, 2000);
}
$( document ).ready(function() {
$("a.link1").click(linkClickCallback.bind(null, '#link1'));
$("a.link2").click(linkClickCallback.bind(null, '#link2'));
$("a.link3").click(linkClickCallback.bind(null, '#link3'));
});
Note that in the linkClickCallback i also wrote the proper use of stop() method.
EDIT:
This will work for all items in menu:
$( document ).ready(function() {
$("#menu a").click(function(e){
e.preventDefault();
linkClickCallback('#' + this.className);
});
});
with the same linkClickCallback function.
Yeah just generalise a function like this and then inside the function, look for the caller (this):
$("#menu a").click(function(e){
var t = $(this)
$('html, body').animate({
scrollTop: t.offset().top
}, 2000);
});
I have a site where there is a called .slidingDiv which when the anchor .show_hide is clicked it appears and slides down which is great when it's the only content on the page.
If there is other content above this div it doesn't scroll down and show. Instead it shows the div but it is out of site, so it does actually work but not push the rest of the content up.
Here's the JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(), 1000;
scrollTop: $(this).offset().top
});
});
</script>
Many thanks
Pete
Setting scrollTop in the callback of the slideToggle function or after the slideToggle function has been called (as you have did) results in jumpy behavior, at best. If you are looking for a smooth animation it is best to initiate the slide then animate the page to scroll down. This is demonstrated by this fiddle. Here is the js:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
$(".slidingDiv").slideToggle(1000);
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top + $('window').height()
}, 2000);
});
});
Just make a check before scrollTop
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click',function(){
$(".slidingDiv").slideToggle(function(){
if($('.slidingDiv').height() > 0) {
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top
}, 1000);
}
});
});
});
</script>