Удобной функцией на любом сайте является прокрутка страницы. Особенно хорошо, когда она умеет прокручивать не только вверх, но и вниз, к тексту.
Например, Вы начали чтение статьи, потом решили посмотреть сколько еще читать и прокрутили вниз, как вернуться назад к тому месту, где Вы закончили чтение?
jQuery позволяет ответить на этот вопрос и предлагает ряд инструментов для реализации этой идеи. Используя данную библиотеку, мы сможем получить эффект мягкой прокрутки страницы:
- вниз;
- вверх;
- к тексту.
Что для этого необходимо? Подключить jQuery. Если у Вас её еще нет (проверьте в исходном коде — Ctrl+U).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Также необходимо добавить в подключенный JS файл следующий код JS:
//ЕГО НЕОБХОДИМО ДОБАВЛЯТЬ В ОБЛАСТЬ DOCUMENT.READY
(function($)
{
$(document).ready(function()
{
$('body').append('<div id="scrll"><div class="go-top help" id="ToTop"><span class="help_i">Вверх</span><span class="icon-arrow-up-2"></span></div><div class="go-content help" id="ToContent"><span class="help_i">К содержимому</span><span class="icon-list-view"></span></div><div class="go-bottom help" id="ToBottom"><span class="help_i">Вниз</span><span class="icon-arrow-down-2"></span></div></div>');
var allhlp = $('span.help_i');
var adh = $('div.help');
$(allhlp).hide();
$(adh).each(function(i) {
$(this).on("hover",function(){
$(allhlp[i]).show(200);
})
$(this).on("mouseleave",function(){
$(allhlp[i]).hide(200).stop(false, true);
})
})
var scrll = $("#scrll");
var t=$("#ToTop");
var b=$("#ToBottom");
var ht=$("html,body");
var content_position = $(window).scrollTop();
if ($(window).scrollTop() >= "250") {
$(t).fadeIn(500);
}
$(window).scroll(function(){
if ($(window).scrollTop() <= "250") {
$(t).fadeOut(500);
} else {
$(t).fadeIn(500);
}
if ($(window).scrollTop()>=$(document).height()-"999") $(b).fadeOut(500)
else $(b).fadeIn(500)
});
$(t).on("click",function(){
content_position = $(window).scrollTop();
$(ht).animate({scrollTop:0},500);
});
$(b).on("click",function(){
content_position = $(window).scrollTop();
$(ht).animate({scrollTop:jQuery(document).height()},500);
});
$("#ToContent").on("click",function(){
$(ht).animate({scrollTop:content_position},500);
});
//OFF ready
})
})(jQuery);
В данном примере используются символы из шрифта IcoMoon. Вот его API:
<link href='https://f.inverser.pro/files/scripts/icomoon/fonts/icomoon.css' rel='stylesheet' type='text/css' />
Далее код CSS:
.go-top,.go-content,.go-bottom{position:fixed;bottom:150px;right:30px;display:none;cursor:pointer;color:#fff;font-size:17px;text-shadow:0 0 3px #000;}
.go-content {bottom:100px;display:block;}
.go-bottom {bottom:50px;}
.go-top:hover, .go-content:hover, .go-bottom:hover{color:#ff002a;text-shadow:0 0 2px #fff;}
.help_i{padding:2px 3px;background:rgba(0,0,0,.5);color:#fff;margin:0 5px 0;}
.help_i:after{font-family:'IcoMoon';content:"\e006";font-size:15px;color:#ff002a;}
Итак, на данном этапе у Вас уже должны быть видны навигационные элементы по странице.
