I have a page that does infinite scrolling and I wanted to do some performance testing on it by scrolling endlessly to the bottom of the page.
Is there a jQuery/javascript command that allows me to scroll continously on a page non-stop?
I tried doing the following:
for (var i=0;i<100;i++)
{
setTimeout(window.scrollTo(0,document.body.scrollHeight), i * 10000);
}
basically I wanted to call window.scrollTo .. after delayed for 5 seconds, and then calling it again.. infinitely. However the solution above doesn't work. I don't care about this being hacky, I just needed something to work for testing.
Here is a simple fiddle:
CSS:
body{
height:400px;
overflow-y:scroll;
}
JS:
var body = $('body');
setInterval(function(){
var pos = div.scrollTop();
div.scrollTop(pos + n); // you can have your offset
}, 200);
You can do like this
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
Related
I have 2 static (html position: fixed;) images at the edges of the screen (right and left). When users scrolls more than 100 pixels from top, these edges retract 50 pixels.
I want to them to reappear (normal again, as they were at the beginning) when users scrolls back to top. I tried adding boolean value which is true when they retract and added it to condition when they need to reappear again. But it isn't working. Why?
userHasScrolled = false;
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100) {
$(".rightstatic").animate({marginRight:'-50px'}, 900);
$(".leftstatic").animate({marginLeft:'-50px'}, 900);
userHasScrolled = true;
}
});
});
if($(window).scrollTop() <= 0 && userHasScrolled) {
$(".rightstatic").animate({marginRight: '+50px'}, 400);
$(".leftstatic").animate({marginLeft:'+50px'}, 400);
userHasScrolled = false;
}
Edit:
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100) {
$(".rightstatic").animate({marginRight:'-20px'}, 900);
$(".leftstatic").animate({marginLeft:'-20px'}, 900);
} else if($(window).scrollTop() <= 0) {
$(".rightstatic").animate({marginRight: '+0px'}, 400);
$(".leftstatic").animate({marginLeft:'+0px'}, 400);
}
});
});
It kinda works, but has a HUGE delay. Like more than a minute after reaching top it retracts back.
Edit 2: After throttling it finally works. Thanks #TomaszBubała.
It isn't working because the bottom part of your code is called only once and userHasScrolled is false by that time. You need to combine both inside $(window).scroll(). I think you can get rid of userHasScrolled variable and second condition could be just else instead of else if.
var scrollTimeout;
var throttle = 250;
$(document).ready(function(){
$(window).scroll(function(){
if(scrollTimeout) return;
scrollTimeout = setTimeout(function() {
scrollTimeout = null;
const scrolled = $(this).scrollTop();
if (scrolled > 100) {
console.log("1");
$(".rightstatic").animate({marginRight:'-20px'}, 900);
$(".leftstatic").animate({marginLeft:'-20px'}, 900);
} else {
console.log("2");
$(".rightstatic").animate({marginRight: '+0px'}, 400);
$(".leftstatic").animate({marginLeft:'+0px'}, 400);
}
}, throttle);
});
});
Fiddle: https://jsfiddle.net/wctxbynt/41/
EDIT:
It wasn't working as intended since scroll event is fired multiple times (tens of times) with a single mousewheel interaction, causing jQuery animate to be called far too many times than it needs to be. A common way to fix this problem is to "throttle" a function not to be called unless a certain amount of time has passed. In edited code above we define timeout as 250ms, which means that our scroll handler code will get called up to 4 times a second - not more (a big difference as opposed to ex. 30 times in 100ms which is huge improvement in performance). Above is just an easy implementation of throttle function - read more about throttling here.
When i click a link and try to scroll to a particular div with slow animation the whole page get scrolled instead of that particular div.
I am sharing the link to the plnkr below open it in full screen mode.
http://plnkr.co/edit/5ZlY7ivJ2xwckVeyIRzO?p=preview
for full screen loading
http://run.plnkr.co/HV426GUKePHeJPfS/
The problem is that when the content present in the right hand side panel is clicked (only recommendation and cme & Attended is to cliked) the middle-panel should be scrolled to show that particular div on the top.
Instead what's happening is the whole page is getting scrolled thus making the UI not much of use.
I have tried using the following two javascript code for showing some animation and scrolling the middle_profile div or mm div but none of them is working.
for scrolling middle_profile div
$("#bb").click(function() {
$('.middle_profile').animate({
scrollTop: $("#recommendationDiv").position().top
}, 'slow');
});
$("#bb1").click(function() {
$('.middle_profile').animate({
scrollTop: $("#CMEDiv").offset().top
}, 'slow');
});
for scrolling mm div
var scrolled = 0;
$("#bb").on("click", function() {
scrolled = scrolled - 300;
$(".mm").animate({
scrollTop: scrolled
}, 50);
});
Is there another way of doing it through jquery or some other library is to be included for smooth scrolling the page?
You just need to put inside the $(document).ready() your code, and set in your css the position: relative; top:0; to your div who will be focus.
$(document).ready(function(){
$("#bb").click(function() {
$('html,body').animate({
scrollTop: $("#recommendationDiv").offset().top
}, 'slow');
});
$("#bb1").click(function() {
$('html,body').animate({
scrollTop: $("#CMEDiv").offset().top
}, 'slow');
});
// var scrolled = 0;
// $("#bb").on("click" ,function(){
// scrolled=scrolled-300;
// $(".mm").animate({
// scrollTop: scrolled
// },50);
// });
})
I want to scroll to a specific target in my application - something like this:
var editor = self.$el.find(".editorWrapper[data-containerid=" + containerId + "]").closest('.containerWrapper');
$('html, body').animate({
scrollTop: editor.position().top-5
}, 1000);
The problem is, that there are elements which render while scrolling down -> e.g. an image or iframe gets rendered while it scrolls down.I don't know the height of that new rendered element (would be tough to get the height - but not impossible so) the scroll stops at a wrong position. Is there an easy way to scroll smoothly to an element while the offset/height changes other then saving the height of each "new rendered" element?
I would just scroll down until it actually finds the specific point. Example:
function ScrollTo(el) {
if ($('html').scrollTop() < (el.position().top - 5)) {
$('html').animate({
scrollTop: $('html').scrollTop() + 1
}, 1, 'swing', function() {
ScrollTo(el);
});
}
}
ScrollTo($('#scrollTo'));
div {
width:400px;
}
#large {
height:400px;
background:red;
}
#scrollTo {
height:400px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="large"></div>
<div id="scrollTo"></div>
You could play around with the settings to make it scroll at a decent speed for you, etc.
You want your page to be fully loaded you can call you script in :
$(document).load(function () {
var editor = self.$el.find(".editorWrapper[data-containerid=" + containerId + "]").closest('.containerWrapper');
$('html, body').animate({
scrollTop: editor.position().top-5
}, 1000);
});
https://api.jquery.com/load-event/
The scroll position is probably going to change everytime an image/iframe gets rendered, so the best way is binding load events to such elements (image/iframe) that updates the scrollTop position.
I've got a scroll to top button I implemented via code that I got from one of the numerous examples out there. It works great. I changed the timing function for its appearance so that instead of appearing after 100 pixels it appears after 1340. I did this because there's some boxes on the right and I don't want the button to appear until they've been scrolled by and empty space thus appears for the button to fade in. The timing looked perfect -- the button appeared after what I figured was 1340 pixels from the top of the page.
However, I noticed that on a different (larger) screen the button didn't appear at the right time, but later. What I realized (if I gather correctly) was that the 1340 specification wasn't an absolute number of pixels from the top of the page, but was how many pixels had been scrolled through from the bottom of the browser window. For example, if I re-size the height of my browser window from, say, 1000 pixels to 400 pixels and reload the page, the button will appear 600 pixels too soon.
So my question is, is there a way to change my code so that the button appears only once a certain part of the page, measured from the top of the window, appears on screen?
Here's the javascript I'm currently using:
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1340) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
Thanks for any help.
Try this one--
<script type="text/javascript">
$(document).ready(function () {
ToggleScrollUp();
$(window).scroll(function () {
ToggleScrollUp();
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
function ToggleScrollUp() {
if ($(".yourbox").offset().top < $(window).scrollTop() + $(window).height()) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
}
</script>
Check out this fiddle: http://jsfiddle.net/ro39dkaL/2/
Instead of using 1340 calculate the position of the bottom of the boxes instead, you can calculate the position on the fly so it's always accurate to the situation:
$(document).ready(function () {
var elem = $('#weblinks');
var bottom = $(elem).position().top+$(elem).outerHeight(true)
$(window).scroll(function () {
if ($(this).scrollTop() > bottom) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
the 1340 specified is hard coded which wont be accurate in all cases.
A better solution is to find the height of the element w.r.t the browser window.
the jquery .offset() can be used.
var offset = $("#child").offset();
var fromTop = offset.top - $(window).scrollTop();
I made this fiddle and I use another way: as you can see, I placed a div with id scroll_toggle. When the user reaches this div (obviously you can remove the text, this is just a demonstration).
This is the fiddle: http://jsfiddle.net/afilini/7633pr0r/
I am working on a project where I am assigned a task to make a blink image moving on the web page from the left to the right.
The image should move(step up) and blink each second.
I know how to make it blink, my code is below:
function blink(time, interval){
var timer = window.setInterval(function(){
$("#img").css("opacity", "0.1");
window.setTimeout(function(){
$("#img").css("opacity", "1");
}, 100);
}, interval);
window.setTimeout(function(){clearInterval(timer);}, time);
}
blink(5000, 1000);
But I don't know how to move it on a second basis and at the same time blink it.
Please, help me guys!
Thanks
how about using jquery animate?
$("#img").animate({marginLeft:'500px'},1000);
Here's a demo that is using only the power of the animate function :
http://jsfiddle.net/vtZd5/
try this:
function blink() {
$('div').fadeTo(1000, 0.1, function(){
$(this).animate({opacity: '1', top: '+=20px'}, 500);
blink()
})
}
blink()
http://jsfiddle.net/AJSk3/3/