Jquery

Scroll with animation

$(document).ready(function() {
 
$('.backtotop').click(function(){
var nPixel = 300
$('html, body').animate({scrollTop:nPixel}, 'slow');
 
});

Scroll an element or a window

	$('html,body').animate( {scrollTop: 0},500);

Scroll to top of page cross browser

In safari and in chrome 'html, body' will not work instead 'body' will word.
And $.browser.safari will work for both safari and chrome because in both the browsers the browser name string is safari.

dro.style.top = ($.browser.safari) ? $('body').scrollTop() + 100 + 'px' : $('html, body').scrollTop() + 100 + 'px';

refer this for pure javascript

http://stackoverflow.com/questions/871399/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window

which says

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

Jquery Scroll to an element from anywere

var target_offset = $("#comehere").offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 2500);

1. comehere is the target element you want to scroll to.
   

So you can be in any scrolled height of the html document and call a function with that code.

Jquery Simple Drop down menu

Jquery Simple Drop Down Menu

Creating a modal overlay with opacity over body tag for animation

• http://stackoverflow.com/questions/965662/using-jquery-to-create-overlay-but-content-inherits-css-opacity-can-you-help

CSS:
.modalOverLay { position: fixed; z-index:100; top: 0px; left: 0px; height: 100%; width: 100%;
 background: #000000; display: none; }

the following js which was written on jquery 1.3 :

$(document).ready(function() {
        $(document.body).prepend('<div class="modalOverLay"></div>');
        $('.modalOverLay').css({ opacity: 0.5, width: '100%', height: '100%' });
        $('#trigger').click(function() {
            $('.modalOverLay').fadeIn('slow');
            $('.contentBox').css({
                position: 'absolute',
                left: ($(document).width() - $('.contentBox').width()) / 2,
                top: ($(document).height() - $('.contentBox').height()) / 2
            });
            $('.contentBox').fadeIn(500);
 
        });
    });

and the following mark up :

<a href="#" id="trigger">Trigger Modal pop up</a>
<div class="contentBox">
    <p>I am on overlay but don't have the same opacity</p>
</div>

this way your content will not have the same opacity as your modal overlay and seats nicely
in the middle of what we all look at sometimes too much!! :)

Jquery Plugins

Here is a list of various links which has jquery plugins

• http://www.jqueryplugins.com/plugin/193/

Sexy alert box

• http://code.google.com/p/sexy-alert-box/

Position Fixed using jquery

Using this HTML:

<div id="myElement" style="position: absolute">This stays at the top</div>

This is the javascript you want to use. It attaches an event to the window's scroll and moves the element down as far as you've scrolled.

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

and here is another

Beautiful! You're solution was 99%... instead of "this.scrollY", I used "$(window).scrollTop()". What's even better is that this solution only requires the jQuery1.2.6 library (no additional libraries needed).

The reason I wanted that version in particular is because that's what shipps with MVC currently.

Here's the code:

$(document).ready(function() {
    $("#topBar").css("position", "absolute");
});
 
$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});

References

• This link has a nice tutorial for scroll and bounce animation

• 37-more-shocking-jquery-plugins

• 50-amazing-jquery-examples