Develop Reference

How to load data without changing the scrolling position?

Why does the scroll position change when I prepend data in given data. I scroll to top it prepend data but scroll position goes to top. But I saw lot of example in Facebook and whatsapp in which when it load previous data scroll position remain same.
Can we retain the scroll position ? http://jsfiddle.net/cQ75J/17/
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
$("#next").html('')
$("#pre").html('')
$("#next").html($("#current").html());
$("#current").html('');
$("#current").html(pages.pop())
.prependTo($("#fullContainer"));
}

This has to be done in Javascript:
One way to do this is to use a hidden div of the same height and width as the one you are prepending and measure it's scrollHeight when you add the content to it. Then, after you prepend the text, simply set the content div's scrollTop to the scrollHeight of the hidden div:
$(document).ready(function(){
setTimeout(function(){
$("div#hiddenDiv").html("Testing<br><br><br>");
var coffset = document.getElementById("hiddenDiv").scrollHeight;
$("div#content").prepend($("div#hiddenDiv").html());
document.getElementById("content").scrollTop += coffset;
}, 5000);
});
In the following fiddle, text will be prepended to the div after a few seconds, but the scroll
position will not change.
JSFiddle

Jquery Scroll One pixel from where ever the user is on screen

okay heres the scenario. I have a one page website with may sections using anchor links. Whe the user is on a secondary layout (page) and when they click on to go to a section on the main page again, for some reason the graphics dont load properly until a scroll happens. All I want to do is whenever the main layout is loaded, no matter which anchor it loads to, simply scroll the page up or down by 1 pixel.
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
I tried the above, but this code simply takes the user 100 pixels from the top. I don't want that to happen, i.e. not from the top but from where ever the user is on screen.

use jquery scrollTop() to set the scroll position to the current scroll position + 1:
$(window).scrollTop($(window).scrollTop()+1);

I have a similar problem. I want to scroll down 1 pixel and then 1 pixel up, so the user hopefully won't notice anything at all. I did this:
window.scrollBy(0, 1); // 0 pixels horizontal and 1 pixel down
window.scrollBy(0, -1); // 0 pixels horizontal and 1 pixel up
UPDATE:
But I might end up using JQuery instead. All I want is the scroll event to fire and I can do that with:
$(window).scroll();

A pure JavaScript solution without the jQuery overhead:
window.scrollY += 100;
With jQuery (and a fancy animation):
var cur = $(window).scrollTop();
$(window).animate({scrollTop: cur + 100});

$("html, body").animate({scrollTop: ($(window).scrollTop() + 1)});

JavaScript scrollTop function

I have been using JavaScript scrollTop function to scroll the div to top by 5 px. but its not working.
I am using:
scdiv.scrollTop = "5px";
The problem is it scrolls the div to top instead of moving to 5 px. Any suggestions?

scrollTop is a property, its value is an int.
div.scrollTop += 5;
https://developer.mozilla.org/en/DOM/element.scrollTop

$("#yourButtonId").on('click',function(){
var scDiv = $("#scdiv");
var top = scDiv.css('top');
top = parseInt(top);
scDiv.css('top',(top-5)+"px");
//To make it visually scrollable
scDiv.animate({
top: top
},500);
});

scrollTop accepts integer numbers, it doesn't understand CSS values like px, so you would use something like this: element.scrollTop += 5;
See an example here: http://jsfiddle.net/pMafC/.
You can click a button to make the div scroll.
See scrollTop - MDN.

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?

You change the z-index using css:
div.class {
z-index: 60;
}

You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.

You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}

jquery scroll speed?

this is a script i got from a the internet, and it works perfectly, what it deos it scrolls automatically on the movement of the mouse, over a div in this case scroll, but i cnt seem to find where i can find the speed, or can make it slower!! im so confused!!
$("#scroll").mousemove(function(e){
/* The scrollable quote container */
if(!this.hideDiv)
{
/* These variables are initialised only the firts time the function is run: */
this.hideDiv = $(this);
this.scrollDiv = $('#scroll');
this.pos = this.hideDiv.offset();
this.pos.top+=20;
/* Adding a 20px offset, so that the scrolling begins 20px from the top */
this.slideHeight = this.scrollDiv.height();
this.height = this.hideDiv.height();
this.height-=20;
/* Adding a bottom offset */
this.totScroll = this.slideHeight-this.height;
}
this.scrollDiv.css({
/* Remember that this.scrollDiv is a jQuery object, as initilised above */
marginTop:'-'+this.totScroll*(Math.max(e.pageY-this.pos.top,0)/this.height)+'px'
/* Assigning a negative top margin according to the position of the mouse cursor, passed
with e.pageY; It is relative to the page, so we substract the position of the scroll container */
});
});

The code seems to be just setting the margin directly:
marginTop:'-'+this.totScroll*(Math.max(e.pageY-this.pos.top,0)/this.height)+'px'
That is, it doesn't call any scroll jquery function that could easily be animated. To achieve that you would have to do some rewriting of that code, probably using jquery animate() function with the marginTop css.
The only problem is that the code is called on mousemove, which means that it could easily be called again while the animation is still active. So you will have to come up with some workaround there, like maybe checking first if there is an animation present and aborting it in that case.