Показать сообщение отдельно
  #4 (permalink)  
Старый 24.12.2015, 20:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,309

snovapavel, функция swingFromTo из указанного вами плагина
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.js'></script>
  <script>
$(function() {
    var duration = 2000,
        play = false;
     function swingFromTo(a) {
            var b = 1.70158;
            return (a /= 0.5) <
                1 ? 0.5 * a * a * (((b *= 1.525) + 1) * a - b) : 0.5 * ((a -= 2) * a * (((b *= 1.525) + 1) * a + b) + 2)
        }
	$('a[href*=#]:not([href=#])').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {

        if (play) return;
        play = true;
        var d = performance.now();
        var from = window.pageYOffset;
        var to =  target.offset().top
        window.requestAnimationFrame(function foo(a) {
            var a = (a - d) / duration;
            1 < a && (a = 1);
            var progress = swingFromTo(a);
            window.scrollTo(0, from - (from-to) * progress);
            if (a == 1) {
                play = false;
            } else window.requestAnimationFrame(foo)
        });
        return false



            }
		}
	});
});
</script>

</head>
<body>
  <section>

	<article>

		<h2 id="top">Часто задаваемые вопросы — ЧаВо</h2>

		<ul>

			<li><a href="#101" title="Вопрос номер пять">Вопрос номер пять</a></li>

			<li><a href="#100" title="Вопрос номер четыре">Вопрос номер четыре</a></li>

			<li><a href="#99" title="Вопрос номер три">Вопрос номер три</a></li>

			<li><a href="#98" title="Вопрос номер два">Вопрос номер два</a></li>

			<li><a href="#97" title="Вопрос номер один">Вопрос номер один</a></li>

		</ul>









		<article id="post-101" class="post-101 chastye-voprosy type-chastye-voprosy status-publish hentry">
			<h3>Вопрос номер пять</h3>

			<section class="entry-content">
				<p class="hyphenate text" lang="ru">Мно­гие ду­ма­ют, что Lorem Ipsum — взя­тый с по­тол­ка псев­до-ла­тин­ский набор слов, но это не со­всем так. Его корни ухо­дят в один фраг­мент клас­си­че­ской ла­ты­ни 45 года н.э., то есть более двух ты­ся­че­ле­тий назад. Ричард Мак­Клин­ток, про­фес­сор ла­ты­ни из кол­ле­джа Hampden-Sydney, штат Вир­джи­ния, взял одно из самых стран­ных слов в Lorem Ipsum, «consectetur», и за­нял­ся его по­ис­ка­ми в клас­си­че­ской ла­тин­ской ли­те­ра­ту­ре. В ре­зуль­та­те он нашёл неоспо­ри­мый пер­во­ис­точ­ник Lorem Ipsum в раз­де­лах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пре­де­лах добра и зла»), на­пи­сан­ной Ци­це­ро­ном в 45 году н.э. Этот трак­тат по тео­рии этики был очень по­пу­ля­рен в эпоху Воз­рож­де­ния. Пер­вая стро­ка Lorem Ipsum, «Lorem ipsum dolor sit amet..», про­ис­хо­дит от одной из строк в раз­де­ле 1.10.32</p>
				<br>
				<a href="#top">↑&nbsp;Вверх</a>
			</section><!-- .entry-content -->
		</article>

		<article id="100">
			<h3>Вопрос номер четыре</h3>

			<section>
				<p>Мно­гие ду­ма­ют, что Lorem Ipsum — взя­тый с по­тол­ка псев­до-ла­тин­ский набор слов, но это не со­всем так. Его корни ухо­дят в один фраг­мент клас­си­че­ской ла­ты­ни 45 года н.э., то есть более двух ты­ся­че­ле­тий назад. Ричард Мак­Клин­ток, про­фес­сор ла­ты­ни из кол­ле­джа Hampden-Sydney, штат Вир­джи­ния, взял одно из самых стран­ных слов в Lorem Ipsum, «consectetur», и за­нял­ся его по­ис­ка­ми в клас­си­че­ской ла­тин­ской ли­те­ра­ту­ре. В ре­зуль­та­те он нашёл неоспо­ри­мый пер­во­ис­точ­ник Lorem Ipsum в раз­де­лах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пре­де­лах добра и зла»), на­пи­сан­ной Ци­це­ро­ном в 45 году н.э. Этот трак­тат по тео­рии этики был очень по­пу­ля­рен в эпоху Воз­рож­де­ния. Пер­вая стро­ка Lorem Ipsum, «Lorem ipsum dolor sit amet..», про­ис­хо­дит от одной из строк в раз­де­ле 1.10.32</p>
				<br>
				<a href="#top">↑&nbsp;Вверх</a>
			</section>
		</article>

		<article id="99">
			<h3>Вопрос номер три</h3>

			<section>
				<p>Мно­гие ду­ма­ют, что Lorem Ipsum — взя­тый с по­тол­ка псев­до-ла­тин­ский набор слов, но это не со­всем так. Его корни ухо­дят в один фраг­мент клас­си­че­ской ла­ты­ни 45 года н.э., то есть более двух ты­ся­че­ле­тий назад. Ричард Мак­Клин­ток, про­фес­сор ла­ты­ни из кол­ле­джа Hampden-Sydney, штат Вир­джи­ния, взял одно из самых стран­ных слов в Lorem Ipsum, «consectetur», и за­нял­ся его по­ис­ка­ми в клас­си­че­ской ла­тин­ской ли­те­ра­ту­ре. В ре­зуль­та­те он нашёл неоспо­ри­мый пер­во­ис­точ­ник Lorem Ipsum в раз­де­лах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пре­де­лах добра и зла»), на­пи­сан­ной Ци­це­ро­ном в 45 году н.э. Этот трак­тат по тео­рии этики был очень по­пу­ля­рен в эпоху Воз­рож­де­ния. Пер­вая стро­ка Lorem Ipsum, «Lorem ipsum dolor sit amet..», про­ис­хо­дит от одной из строк в раз­де­ле 1.10.32</p>
				<br>
				<a href="#top">↑&nbsp;Вверх</a>
			</section>
		</article>

		<article id="98">
			<h3>Вопрос номер два</h3>

			<section>
				<p>Мно­гие ду­ма­ют, что Lorem Ipsum — взя­тый с по­тол­ка псев­до-ла­тин­ский набор слов, но это не со­всем так. Его корни ухо­дят в один фраг­мент клас­си­че­ской ла­ты­ни 45 года н.э., то есть более двух ты­ся­че­ле­тий назад. Ричард Мак­Клин­ток, про­фес­сор ла­ты­ни из кол­ле­джа Hampden-Sydney, штат Вир­джи­ния, взял одно из самых стран­ных слов в Lorem Ipsum, «consectetur», и за­нял­ся его по­ис­ка­ми в клас­си­че­ской ла­тин­ской ли­те­ра­ту­ре. В ре­зуль­та­те он нашёл неоспо­ри­мый пер­во­ис­точ­ник Lorem Ipsum в раз­де­лах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пре­де­лах добра и зла»), на­пи­сан­ной Ци­це­ро­ном в 45 году н.э. Этот трак­тат по тео­рии этики был очень по­пу­ля­рен в эпоху Воз­рож­де­ния. Пер­вая стро­ка Lorem Ipsum, «Lorem ipsum dolor sit amet..», про­ис­хо­дит от одной из строк в раз­де­ле 1.10.32</p>
				<br>
				<a href="#top">↑&nbsp;Вверх</a>
			</section>
		</article>

		<article id="97">
			<h3>Вопрос номер один</h3>

			<section>
				<p>Мно­гие ду­ма­ют, что Lorem Ipsum — взя­тый с по­тол­ка псев­до-ла­тин­ский набор слов, но это не со­всем так. Его корни ухо­дят в один фраг­мент клас­си­че­ской ла­ты­ни 45 года н.э., то есть более двух ты­ся­че­ле­тий назад. Ричард Мак­Клин­ток, про­фес­сор ла­ты­ни из кол­ле­джа Hampden-Sydney, штат Вир­джи­ния, взял одно из самых стран­ных слов в Lorem Ipsum, «consectetur», и за­нял­ся его по­ис­ка­ми в клас­си­че­ской ла­тин­ской ли­те­ра­ту­ре. В ре­зуль­та­те он нашёл неоспо­ри­мый пер­во­ис­точ­ник Lorem Ipsum в раз­де­лах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пре­де­лах добра и зла»), на­пи­сан­ной Ци­це­ро­ном в 45 году н.э. Этот трак­тат по тео­рии этики был очень по­пу­ля­рен в эпоху Воз­рож­де­ния. Пер­вая стро­ка Lorem Ipsum, «Lorem ipsum dolor sit amet..», про­ис­хо­дит от одной из строк в раз­де­ле 1.10.32</p>
				<br>
				<a href="#top">↑&nbsp;Вверх</a>
			</section>
		</article>

	</article>

</section>

</body>

</html>
Ответить с цитированием