Кнопка наверх jQuery — Библиотека кода

Не забываем подключить jQuery

js (перед </head>)

<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$('#toTop').fadeIn();

} else {

$('#toTop').fadeOut();

}

});

$('#toTop').click(function() {

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

});

</script>

css

<style> 
#toTop {
        width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}
</style>

<style>

#toTop {

width:100px;

border:1px solid #ccc;

background:#f7f7f7;

text-align:center;

padding:5px;

position:fixed; /* this is the magic */

bottom:10px; /* together with this to put the div at the bottom*/

right:10px;

cursor:pointer;

display:none;

color:#333;

font-family:verdana;

font-size:11px;

}

</style>

html

Перед </body>

<div id="toTop">^ Back to Top</div>

1	<div id="toTop">^ Back to Top</div>

Еще больше примеров тут.

Добавить комментарий Отменить ответ