среда, 29 июля 2015 г.

SharePoint. jQuery page scroll



При размещении статей большого размера возникает необходимость оперативно вернуться к началу страницы, так как вверху находится навигация. Более-менее продвинутые пользователи могут использовать клавишу "Home" на клавиатуре. Для остальных можно добавить кнопку "вверх", по нажатию на которой страница прокрутиться  к самому началу. Эта кнопка должна присутствовать не всегда, а только когда пользователь переместит страницу вниз на какое-то расстояние.

Все будет реализовано на JavaScript, jQuery и немного CSS c HTML.
Для быстрого просмотра результата создадим отдельную страницу и добавим на нее полный текст рыбы. Рыбу можно взять здесь. Теперь нам нужно добавить JavaScript код, для этого разместим на странице веб-часть "редактор сценариев" и вставим код ниже:



<script src="/SiteAssets/Script/jQuery/jquery-1.11.0.min.js"></script>
<script>
function  HandleScroll() {
// Навешиваем обработку на событие движения колеса мыши
var offsetY = 300;
$('#s4-workspace').scroll(function () {
        if ($(this).scrollTop() > offsetY) {
            //Стрелка появись
            $('.scrollUpBtn').fadeIn();
        } else {
            //Стрелка исчезни
            $('.scrollUpBtn').fadeOut();
        }
    });

// Навешиваем обработку на событие клика по стрелке
$('.scrollUpBtn').click(function (){
        $('#s4-workspace').animate({scrollTop:0},'slow');
        return false;
    });
};
_spBodyOnLoadFunctionNames.push("HandleScroll");
</script>

После этого добавим на страницу веб-часть "редактор контента" и добавим в нее стили:

<style>
.scrollUpBtn{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    top:75px;
    right:40px;
    display:none;
    background: url('https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519703-211_CircledBorderArrowUp-64.png') no-repeat 0px 20px;
}
.scrollUpBtn:hover{
    text-decoration:none;
}
</style>

Теперь остается добавить в веб-часть "редактор контента" строчку с html разметкой
<a href="#" class="scrollUpBtn"></a>

Как это выглядит в итоге: