При размещении статей большого размера возникает необходимость оперативно вернуться к началу страницы, так как вверху находится навигация. Более-менее продвинутые пользователи могут использовать клавишу "Home" на клавиатуре. Для остальных можно добавить кнопку "вверх", по нажатию на которой страница прокрутиться к самому началу. Эта кнопка должна присутствовать не всегда, а только когда пользователь переместит страницу вниз на какое-то расстояние.
Все будет реализовано на JavaScript, jQuery и немного CSS c HTML.
Для быстрого просмотра результата создадим отдельную страницу и добавим на нее полный текст рыбы. Рыбу можно взять здесь. Теперь нам нужно добавить JavaScript код, для этого разместим на странице веб-часть "редактор сценариев" и вставим код ниже:
После этого добавим на страницу веб-часть "редактор контента" и добавим в нее стили:
Теперь остается добавить в веб-часть "редактор контента" строчку с html разметкой
Как это выглядит в итоге:
Все будет реализовано на 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>
Как это выглядит в итоге:
Комментариев нет:
Отправить комментарий