Develop Reference

How to animated/smooth scroll to div using scrolltop

Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.

Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation

set scroll left to start at zero on refresh not working

Why wont this work in IE, if I move the scroll bar to the middle then Refresh it will not reset to zero, instead it stays where is was last left?
$(document).ready(function(){
$(window).scrollLeft(0);
});
Thanks

This script should work as you need
$(document).ready(function ()
{
$(window).bind("scroll", ScrollOnLoad);
// IE fix, remove scroll handler after 150ms
setTimeout(UnbindScroll, 150);
});
function ScrollOnLoad() {
UnbindScroll();
$(window).scrollLeft(0);
}
function UnbindScroll() {
$(window).unbind("scroll", ScrollOnLoad);
}
As you find out, the behaviour of IE is different. It triggers scroll event even after document.ready. This script will hook up on this event and scrollLeft(0) after refresh (in all browsers).
The complicated part is, how to solve new comers, when user visits the page for a first time. Then Internet Explorer does not fire scroll event. And our handler is still in play (and would scroll left when user first time scroll right).
We have to unbind scrollLeft manually. That's why after 150ms is the handler unbounded anyway.

try
$(window).load(function(){
$('body, html').scrollLeft(0);
});

try
$(document).ready(function(){
$('body, html').scrollLeft(0);
});

Trigger $(window).scroll();

When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that?
I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success.
The code
EDIT:
Problem solved. There was an if in my $(window).scroll(function() { }); that caused the problem.

Just use:
// Trigger the scroll event
$(window).scroll();
Source:
http://www.w3schools.com/jquery/event_scroll.asp
https://api.jquery.com/scroll/

Apply it to both body and html as it is not consistent.. (for example, FF uses the html for scrolling while chrome uses the body)
$("html, body").animate({scrollTop: someValue});
demo at http://jsfiddle.net/vzyVh/

You can try below code - here i am scrolling to top of my div tag which has id "one".
$('html,body').animate({ scrollTop: $('#one').offset().top }, 'slow');

Using MouseOver and MouseOut

Hi guys im working on my first website and im trying to implement a sliding menu using jquery.
This is what a got so far :
<a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
<script type="text/javascript">
function ShowBox()
{
$("#SlideMenu").slideDown();
}
function HideBox()
{
$("#SlideMenu").slideUp();
}
</script>
When i MouseOver the control my menu slides down but slides back up automatically.
What I would like is to let the user the time to select and option from the menu and if he doesn't, i would like the menu to close as soon as the mouse leaves the control.
Any idea why this isn't working ?
Thanks in advance.

Do your stuff without the inline JS, and remember to close the <a> element and use a ready function
<a id="test">Show box</a>
<script type="text/javascript">
$(document).ready(function() {
$("#test").on({
mouseenter: function() {
$("#SlideMenu").slideDown();
},
mouseleave: function() {
$("#SlideMenu").slideUp();
},
click: function(e) {
e.preventDefault();
}
});
});
</script>
FIDDLE

As you're using jQuery I believe it would be beneficial for you to use something similar to:
$("#box").hover(
function() {
//.stop() to prevent propagation
$(this).stop().animate({"bottom": "200px"}, "fast");
},
function() {
$(this).stop().animate({"bottom": "0px"}, "fast");
}
);
What this will mean is that whilst the mouse is over the menu, the menu will stay in its open position. When the mouse exits the menu it will close. Obviously change the id, and animation CSS values to suit your needs :)!
Here is a working example:
http://jsfiddle.net/V3PYs/1/

Really there is no problem here - the script is doing exactly what you told it to. However, from what I understand, what you want is for the menu to stay open when you leave the "trigger" element if the user's mouse is now over the menu. Try this:
<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
$("#trigger").hover(function(){
$("#SlideMenu").slideDown();
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
$("#SlideMenu").hover(function(){
clearTimeout(menuMouseout);
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
});
</script>
This way, the user is left some time after mousing out of the trigger element to get to the menu. You might need to fiddle with the timeout, but this should work. I tested this and it seems to be working. Just be sure, if necessary, to wrap this in $(document).ready to make sure all elements are loaded and ready.
Demo: http://www.dstrout.net/pub/menu.htm

If you're using jQuery this would be the proper way to go about it:
Show box
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(just copy/paste this in and it should work)

$.slideToggle() & $.hover() animation queue issue

I'm trying to set up a pretty basic hover animation in jQuery. Mouse over a div and the major content is slid down, mouse up and it slides up.
<script type="text/javascript">
$(function () {
$('.listItem').hover(function () {
$(this).find('.errorData').slideToggle('slow');
});
});</script>
This piece of code works fine, but the obvious problem is the animation queuing if you mouse in and out really quickly.
To alleviate this I have read that the .stop(true) function placed before the .slideToggle() stops the previous animation and clears the animation queue. So I tried this code:
<script type="text/javascript">
$(function () {
$('.listItem').hover(function () {
$(this).find('.errorData').stop(true).slideToggle('slow');
});
});</script>
My problem now is that this only seems to work on the first mousein and mouseout. After that the animations no longer trigger and nothing happens. This is Google Chrome DEV channel.
This seems to be exacerbated by how fast you move the mouse in and out.
I can't seem to work out what the issue is, this JSFiddle has a working (and breaking on my computer) example.
EDIT: I suspect this is a bug in jQuery 1.4.2 and have lodged a bug ticket: http://dev.jquery.com/ticket/6772

try
.stop(true,true)
or you can use this hoverIntent plugin

.stop(true, true)
works like a champ:
$('.subpage-block').hover(function(){
$('.subpage-block-heading span', this).stop(true,true).fadeToggle('fast');
$('.subpage-block-content', this).stop(true,true).slideToggle();
});

MayBe better?
$('.listitem').hover(function(){
if (!$(this).find('.errorData').hasClass('down') &&
!$(this).find('.errorData').hasClass('up')) {
$(this).find('.errorData').addClass('down').slideDown('fast', function() {
$(this).removeClass('down');
});
}
}, function() {
if (!$(this).find('.errorData').hasClass('up')) {
$(this).find('.errorData').addClass('up').slideUp('fast', function() {
$(this).removeClass('up');
});
}
});
This way the queue is at most 2, one when is up and other when is down.
With the first condition we prevents to stay down.