Скрипт "наверх"

Andrew_las · May 29, 2012

Здравствуйте!

Нужен скрипт как на ruseller.com "^ Наверх ^"

Кто нибудь может дать код скрипта?

lexxcode · May 29, 2012

Я такой себе написал:


function scrollToUp (speed) {
	var speed = (speed === undefined) ? 500 : speed;
	var divider = speed / 13;
	var tmpTopScroll = $(document).scrollTop();
	var px = tmpTopScroll / divider;
	var intervalID = setInterval(function () {
		tmpTopScroll = ((tmpTopScroll - px) <= 0) ? 0 : tmpTopScroll - px;
		$(document).scrollTop(tmpTopScroll);
		if (tmpTopScroll === 0) {
			clearInterval(intervalID);
		}
	}, 13);
}

далее просто в событие клика на нужном элементе, вызываете эту фун-ию, задаете скорость если нужно

mishka · May 29, 2012

как по мне так проще:

function scrollTop() {
	jQuery('html, body').animate({
		scrollTop: 0
	}, {
		duration: 400,
		queue: false
	});
}

Зачем setInterval если всеравно jQuery юзать?

jQuery('html, body') такой изврат, так как помнится мне что скролл как-то поразному работал в разных браузерах. Могу ошибаться, надо проверять.

NeoXidizer · May 29, 2012

на ruseller.com используется скрипт jquery.scroll.pack - http://code.google.com/p/taiki-script/downloads/detail?name=jquery.scroll.pack.js в связке с jquery.easing - http://gsgd.co.uk/sandbox/jquery/easing/

подключаете скрипты, активируете функцию

$(function() {
    $("#toTop").scrollToTop({speed:1000, start:1000});
});

создаете элемент

<a href="#" id="toTop">^ Наверх ^</a>

с таким CSS

#toTop{display:block;cursor:pointer;width:100px;background:#f1f1f1;border:1px solid #ccc;border-radius:5px;text-align:center;padding:5px;position:fixed;bottom:20px;right:320px;cursor:pointer;color:#666;text-decoration:none;z-index:100}

и получаете результат http://jsfiddle.net/Xwf5A/

lexxcode · May 29, 2012

mishka, действительно, че-то я провтыкал, что scrollTop в animate можно воткнуть

Andrew_las · May 31, 2012

NeoXidizer, у меня WordPress. Я не понимаю куда написать этот код?

$(function() {
$("#toTop").scrollToTop({speed:1000, start:1000});
});

lexxcode · May 31, 2012

Andrew_las, я не знаю... вероятнее всего где-то в header.php в шаблоне.

Если бы знал, то ответил, совсем не обязательно писать мне в личку о Вашем вопросе.

Andrew_las · May 31, 2012

alexriz, понятно...спасибо! Попробую!

NeoXidizer · May 31, 2012

alexriz, понятно...спасибо! Попробую!

в header.php внутри тега <head></head>, например:


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

<script>
 $(function() {
   $("#toTop").scrollToTop({speed:1000, start:1000});
 });
</script>

<?php wp_head(); ?>
</head>

и там же подключать jquery и остальные скрипты, если необходимо

Andrew_las · May 31, 2012

NeoXidizer, все работает, спасибо огромное!!!

Sign In

Скрипт "наверх"

Recommended Posts

Andrew_las

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Andrew_las

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Andrew_las

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

Andrew_las

Link to comment

Share on other sites

Обсуждения

Forums

Important Information