I have such a function on my website:
$("#search-label").on("keypress", function(e) {
if(e.which == 13) {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 2000);
}
});
Its task is to scroll to the selected element after press enter and it works fine, but the problem is that it can be called repeatedly in a short time and then the page gets stuck.
How to limit the possibility of calling it up to once every 10 seconds?
Thanks
You can use a mix of a variable and a setTimeout to do this:
var scrollOK = true;
$("#search-label").on("keypress", function(e) {
if((e.which == 13) && scrollOK) {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 2000);
scrollOK = false;
setTimeout(function(){ scrollOK=true; }, 10000);
}
});
It uses scrollOK to make sure that scrolling is OK, and when it scrolls, then it sets it to false temporarily (temporarily because the setTimeout sets it back to true after 10 seconds, or 10000 milliseconds).
Edit: as #ChloeAnderson said, this may take up more resources than it should. This is a version that should be better:
var lastScrolled = 0;
$("#search-label").on("keypress", function(e) {
if((e.which == 13) && (Date.now() >= (lastScrolled + 10000))) {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 2000);
lastScrolled = Date.now();
}
});
Related
I have a problem with the scrolling animation. Jumpy scroll occurs when the page is scrolled after scroll-animation. I suspected the scroll-event repeats itself, but I'm not sure. Can you help me with it?
$(document).ready(function(){
var offset;
var anchor = $("#navigation").offset().top;
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();
if (e.originalEvent.wheelDelta < 0) {
//mouse scroll down
console.log('Down: ' + offset + " " + anchor);
if (offset >= anchor) {
// if anchor has been scrolled, user can scroll further
// the problem ocuurs in this block
return true;
} else {
// animate to anchor( nav menu)
$("body, html").animate({
scrollTop: anchor + 1
}, 200);
$("#navigation").addClass("nav-fixed");
return false;
}
} else {
//mouse scroll up
if (offset < anchor) {
$("#navigation").removeClass("nav-fixed");
return true;
}
}});
});
JSFiddle: http://jsfiddle.net/0noms3cs/
Thank you a lot!
Your issue is simple. The scroll event fires over and over again. Your line of thinking behind the cause of this issue is correct, you have a large number of animate events that get stacked up which causes this weird behavior.
You can resolve this issue by adding a boolean variable (such as scrollInitialized) that starts out as false and gets flipped to true once the scroll event has fired once.
Here's the altered JS code. Note: I only added the scrollInitialized variable and a check for it in the if statement.
Edit: I also removed the inner if-else case since it was not necessary using this design.
EDIT 2: I originally misunderstood what you wanted to do. What you need to do was add a scrollLock variable that would only be set to true for the duration of your animation. After thinking about this, I implemented it for you. Here is the Jsfiddle:
https://jsfiddle.net/04gaaapo/1/
Here is the new JS code:
$(document).ready(function () {
var scrollLock = false;
var offset;
var anchor = $("#navigation").offset().top;
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();
// if scroll is NOT locked and we are above the anchor
if (scrollLock === false && offset < anchor) {
if (e.originalEvent.wheelDelta < 0) {
// scrolling down
scrollLock = true;
// animate to anchor( nav menu)
$("body, html").animate({
scrollTop: anchor + 1
}, 200);
// unlock in 250ms
setTimeout(toggleLock, 250);
// add nav class
$("#navigation").addClass("nav-fixed");
} else if (e.originalEvent.wheelDelta > 0) {
// scrolling up
scrollLock = true;
// animate to top of page
$("body, html").animate({
scrollTop: 0
}, 200);
// unlock in 250ms
setTimeout(toggleLock, 250);
// remove nav class
$("#navigation").removeClass("nav-fixed");
}
}
});
function toggleLock() {
scrollLock = !scrollLock;
};
});
I try to add toggle sidebar to my blogger template like: https://boardwalkdemo.wordpress.com/
But... something is wrong - whole code may be.
Now i try to show/hide
jQuery$(document).ready(function () {
$('.sidebar-toggle').click(function(event) {
event.preventDefault();
if ( ! $('body').hasClass('sidebar-open') ) {
scroll_top_position = $('body').scrollTop();
scroll_left_position = $('body').scrollLeft();
}
$('body').toggleClass('sidebar-open');
$(this).toggleClass('toggle-on')
.attr('aria-expanded', $(this).attr('aria-expanded') === 'false' ? 'true' : 'false');
$('#sidebar').attr('aria-hidden', $('#sidebar').attr('aria-hidden') === 'false' ? 'true' : 'false');
if ($('body').hasClass('sidebar-open')) {
$('.site-main').hide();
$('html, body').animate({
scrollTop: 0,
scrollLeft: 0
}, 0);
} else {
$('.site-main').show();
$('html, body').animate({
scrollTop: scroll_top_position,
scrollLeft: scroll_left_position
}, 0);
heights();
}
});
based on wordpress code but don`t work.
I can see my work in progress here: http://blog.detelinmarkov.com/
Where is my mistake?
I work on header now and may be not work properly part of it.
I am trying to force my page to load always on the top. I don't know if I have to define on-refresh or on-load but I've tried everything. I've searched all the previous questions and non of them seemed to work for me. I checked in Chrome and Mozilla. So do you have any suggestions? What should I do?
I tried the following:
1.
$(document).ready(function(){
$(window).scrollTop(0);
});
2.
jQuery('html,body').animate({scrollTop:0},0);
3.
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
4.
$(document).ready(function() {
if (window.location.hash) {
//bind to scroll function
$(document).scroll( function() {
var hash = window.location.hash
var hashName = hash.substring(1, hash.length);
var element;
//if element has this id then scroll to it
if ($(hash).length != 0) {
element = $(hash);
}
//catch cases of links that use anchor name
else if ($('a[name="' + hashName + '"]').length != 0)
{
//just use the first one in case there are multiples
element = $('a[name="' + hashName + '"]:first');
}
//if we have a target then go to it
if (element != undefined) {
window.scrollTo(0, element.position().top);
}
//unbind the scroll event
$(document).unbind("scroll");
});
}
});
5.
$('a').on('click', function(e) {
e.preventDefault();
// do your js stuff
$(window).scrollTop(0);
});
6.
$("html, body").animate({
scrollTop: 0
}, 600);
use animate function
$("html, body").animate({
scrollTop: 0
}, 600);
I have the code below which fades in/out a div for a contact page. I would like this page to have its own URL so when users type that into the address bar, the page loads up with the div already activated. Also, if possible, I would like it so when users click 'back' or 'forward' on their browsers, this page behaves like how a regular page would meaning the history is kept intact.
How should I go about applying this feature to what I already have?
var c = 0;
var contactHeight = $('#contact-keebs').outerHeight();
function contactFadeIn() {
$('#contact-keebs').fadeIn(200);
$('body').css({
height : contactHeight,
overflow : 'hidden'
});
$('#contact-info, #clients').addClass('animated fadeInUp');
}
function contactFadeOut() {
$('#contact-info, #clients').removeClass('animated fadeInUp');
$('body').css({
height : '',
overflow : ''
});
$('#contact-keebs').fadeOut(200);
}
$('#mail-wrap').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$('#contact-button').addClass('project-button').css('width', '71px').text('Projects');
$('.mail-icon').attr('src', site.theme_path + '/img/icon-projects.png');
$('#contact-button').shuffleLetters();
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},200, contactFadeIn);
} else {
contactFadeIn();
}
} else {
$('#contact-button').removeClass('project-button').css('width', '96px').text('Get in touch');
$('.mail-icon').attr('src', site.theme_path + '/img/icon-contact.png');
$('#contact-button').shuffleLetters();
if ($(window).scrollTop() != 0) {
$('html, body').animate({
scrollTop : 0
},200, contactFadeOut);
} else {
contactFadeOut();
}
}
});
MAY HELP USING API PUSHSTATE ?.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
I'm using 2 scripts found on the internet, one for a smooth scroll to a DIV at the bottom of the page, and one for a smooth scroll "Back to top". The issue is that there's a conflict between both and therefore the "back to top" one doesn't work (no back to top on click). Used independently they both work perfectly.
How could I "merge" them both into one single script? (and keep the fade-in fade-out effect of the back to top script) See http://jsfiddle.net/GjsVq/1/
Many thanks
$(document).ready(function() {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
$(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
$('a[href^="#"]').on(... is selecting both <a> elements. One approach is to either rewrite this selector to match only the <a> elements that should force a scroll to the bottom (maybe use a CSS class for this?)
An alternative, quick-and-dirty fix would be to reset the event handlers on the "back-to-top" element before attaching its own click handler: jQuery('.back-to-top').off().click(...
I normally just use one smooth scroll function and then set my "go to top" button with a href="#idOfHighestElementOnPage". This is the smooth scroll function (which may include something helpful if you don't want to go the same route I went):
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 100
}, 'normal');
return false;
}
}
});
})
window.onscroll = scrollFunction;
function scrollFunction() {
var doc = document.documentElement, body = document.body;
var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if (top > 200) {
$('.back-to-top').fadeIn();
}
else {
$('.back-to-top').fadeOut();
}
}