We Keep Coding

setting top and left with offset()

I am trying to position an element using offset() but I'm not sure what is going on:
This is default offset position:
element.offset().top
‌770
element.offset().left
‌1822.796875
Then I try setting it manually
element.offset({top: 674, left: 1722 })
And the output:
element.offset().top
‌-1341
element.offset().left
1722
Top position is -1341 ? and then I tried setting just top property:
element.offset({top:674})
element.offset().top
‌674
and this works ? What is going on, why I can't set both properties at the same time?
UPDATE: I just figured that this might be important: there is also iframe element on the page that has a scrollbar. So everything with offfset work fine, until I scroll down the window of the iframe element. But after scrolling down and then calling offset() it works.

Since there is no shared fiddle, I'm assuming your scenario.
Assuming your element is hidden and you are setting its offset and then making it as visible. in this case your offset settings will not work.
Try to follow these steps.
Make that element visible. (maybe by using element.show())
Set the offset now.

.scrollTop() works ONLY with webkit?

apparently .scrollTop() works only in webkit browsers... is this possible? that's very strange because i found some questions here in stackoverflow titled "scrollTop works only in Firefox" but what is happening to me it's different
$(window).scroll(function() {
console.log($('body').scrollTop())
})
even if i replace window with document nothing changes. the funny thing is when i run this function and i scroll down the page the value still 0 BUT the red little badge beside the number 0 changes at every pixel scrolled...
In chrome and opera this works perfectly.
i'm running Firefox 34.0 on Win7x64 and i'm using jquery 2.1.3

This is because WebKit sets the scrollTop for the main document on the body, while other browser use the html element. However, you can just use window instead of 'body' or 'html' to get the main document scroll position.
$(window).scroll(function() {
console.log($(window).scrollTop())
});
BTW, calling jQuery on an object isn't the fasting thing in the world, and scroll events can fire very rapidly. Consider caching $(window) in a variable for improved performance.
var $window = $(window);
$window.scroll(function() {
console.log($window.scrollTop())
});

If you need scrolltop position, i prefer use offset:
$(window).scroll(function() {console.log($('body').offset().top) })

scrollTop() returns 0 in chrome

I want to check if page is scrolled after it has finished loading and I'm using this code:
$(document).ready(function(){
alert($(window).scrollTop());
});
It works well in Firefox but allways returns 0 in Chrome. Why is this?

Actually Firefox is the only browser that doesn't return 0 for $(window).scrollTop() on domReady or window.onload. Chrome, Safari and IE all return 0. The only safe way to get correct position of scrollbar on domReady is, as mentioned in another answer above, to set an event handler on window's scroll event as below:
$(document).ready(function(){
$(window).scroll(function() {
console.log($(window).scrollTop());
$(window).unbind('scroll');
});
});

$(window).scrollTop() will return 0 when the window isn't scrollable.

The chrome restores the pre-refresh scroll position once the DOM is loaded. So, getting scrollTop on scroll event instead of ready event will work.

I also had the problem that scrollTop() always returned 0 in Chrome, whether I used it on window, on document or on 'html,body'. I finally found out that css was the problem:
html, body {
height: 100%;
overflow-x: hidden;
}
Actually, I don't know exactly why because you can remove parts of this code and then it works again. Strange but problem solved ;)

Try the following code in a page that has some text and a link in the bottom of the page. Remember to have enough text or blank lines in order to make a scroll of the page until you can see the my button
$(document).ready(function () {
alert($(window).scrollTop()); // first load if you did not scroll = 0
$("#button").click(function () { alert($(window).scrollTop()); });
// hitting the button that is located on bottom of page
// - i had to scroll the page = xxx (68 in may case)
});
It is normal in your case to get 0 because the page is not scrolled, the offset between your position and the top of the page is 0.
I tried in Chrome, FF6, IE9.
I hope i was helpful.

I had the same problem but got fixed by adding the document declaration:
<!DOCTYPE html>

Scroll to an html element with a particular id in javascript or jquery

I have html elements with id's assigned. Now I want to scroll to those elements. I see jQuery has a scrollTop which takes an integer value.. How do I easily just make a particular html element with an id scroll to the top? Ideally, with nice and smooth animation.
A quick search showed many scrolling plugins... if a plugin is needed for the above functionality, what's the most popular one? I'm also using jquery-ui.

You could use something like this to scroll to #someElement when the page loads:
$(document).ready(function() {
$("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000);
});
It simply animates the scrollTop property of the body element, and uses the top offset of some specific element as the position to scroll to. The animation lasts for 1000ms.
Note: it selects both html and body so it works across browsers. I'm not sure on the specifics, but some quick tests show that Chrome uses body, but Firefox and IE use html.
Here's a working example.

Consider the following snippet:
$('#myDiv').bind('click',function(){
var pos = $(this).offset().top,
scrollSpeed = 2;
for (var i = pos; i > 0; i=i-scrollSpeed) {
$(window).scrollTop(i);
}
});
It scrolling was binded to #myDiv element on click just for example. Code determines a position of #myDiv element, than calculates number of scroll steps (speed/smoothness). Than does jQuery .scrollTop() thing.

Trigger JQuery function when passed half way down the page

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!

You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');

I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.

See the scroll event and the scrollTop method.

you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});