Работа в интернете


Последние сообщения


□ Обновить □



Рекламный блок



Вакансии:


Модератор

_______________


Контакты:


Написать админу

_______________


Работа на дому. Форум.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Работа на дому. Форум. » Вебмастер » Скрипт кнопки вверх вниз (прокрутка)


Скрипт кнопки вверх вниз (прокрутка)

Сообщений 1 страница 5 из 5

1

Небольшой скрипт прокрутки сайта вверх вниз. Устанавливаем его в самый низ html-низ.

<!--Кнопка вверх вниз-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide();
if ($(window).scrollTop()>=250) $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()<=250) $("#Go_Top").fadeOut("slow")
  else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide();
if ($(window).scrollTop()<=$(document).height()-999) $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-999) $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
  $("html, body").animate({scrollTop:0}, "slow")
})
$("#Go_Bottom").click(function(){
  $("html, body").animate({scrollTop:$(document).height()}, "slow")
})
});
</script>

<img src="https://forumstatic.ru/files/0019/71/4a/49427.png" alt="Наверх" title="Наверх" id="Go_Top"
style="position: fixed; bottom: 60px; left: 1245px; cursor: pointer;">

<img src="https://forumstatic.ru/files/0019/71/4a/54287.png" alt="Вниз" title="Вниз" id="Go_Bottom"
style="position: fixed; bottom: 20px; ю; cursor: pointer;">
<!--Конец кнопки-->

Внимание. Конфликтуют с некоторыми стилями - пропадают некоторые функции в сообщениях.

0

2

Еще один скрипт стрелок. Работает корректно на этом форуме

<!--Кнопки вверх вниз-->
<style>
#Go_Top {
position: fixed;
top: 35%;
left: 1240px;
cursor:pointer;
display:none;
z-index: 100000;
/* замедление */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
opacity: 0.6;
}

#Go_Top:hover {
opacity: 1;
}

#Go_Bottom {
position: fixed;
top: 47%;
left: 1240px;
cursor:pointer;
display:none;
z-index: 100000;
/* замедление */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
opacity: 0.6;
}

#Go_Bottom:hover {
opacity: 1;
}
</style>
<div id='Go_Top'>
<img src="https://forumstatic.ru/files/0019/71/4a/49427.png" alt="Наверх" title="Наверх">
</div>
<div id='Go_Bottom'>
<img src="https://forumstatic.ru/files/0019/71/4a/54287.png" alt="Вниз" title="Вниз">
</div>
<!--Кнопки в верх в низ-->
<script type="text/javascript">
jQuery(function(){

if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
  else $("#Go_Top").fadeIn("slow")
});

if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
  $("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
  $("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>

Красное графическое изображение кнопок
Синие отступ от левого края. Можно поменять на правый отступ.

0

3

Дополню темку!

Скрипт "Прокрутка вверх" как на форуме поддержки.

Код скроллинга

<!--Скроллинг up-->
<style>
.scrollup{
width:31px;
height:30px;
position:fixed;
bottom:30px;
right:35px;
display:none;
text-indent:-9999px;
background:rgba(0,0,0,0.35) url(https://forumstatic.ru/files/0001/ec/60/34838.png) 7px 10px no-repeat;
background-size:17px;
transition:background-color 1s linear,transform 1s linear,opacity 0s linear!important;
border-radius:50%;
-moz-border-radius:50%;
z-index: 99999;
}
.scrollup:hover{
background-color:rgba(0,0,0,0.85);
transition:background-color 1s linear,transform 1s linear,opacity 0 linear!important;
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
<a href="#" class="scrollup" title="Наверх">Наверх</a>
<script type="text/javascript">
$(document).ready(function(){
$('h1.title-logo span').wrapInner('<a href="https://vkontakte.forum.cool/" style="color:#fff;text-decoration:none;"></a>');
$(window).scroll(function(){if($(this).scrollTop()>100){$('.scrollup').fadeIn();}else{$('.scrollup').fadeOut();}});$('.scrollup').click(function(){$("html, body").animate({scrollTop:0},600);return false;});});
</script>
<!--Конец кода Скроллинг up-->

Пояснение: Выделенную ссылку красным, меняйте на свою!
Перезаливать стрелочку необязательно!
Посмотреть, как работает можно на форуме поддержки))
Код вставляем в HTML низ.

0

4

Slavytich написал(а):

Конфликтуют с некоторыми стилями - пропадают некоторые функции в сообщениях.

Если убрать из верхней части кода скрипт:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

То конфликт пропадёт 8-)

Это лишний скрипт от гугла, он только нагружает сайт...

0

5

Income написал(а):

Если убрать из верхней части кода скрипт:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

То конфликт пропадёт 

Это лишний скрипт от гугла, он только нагружает сайт...

Спасибо, бум знать :cool:

0


Вы здесь » Работа на дому. Форум. » Вебмастер » Скрипт кнопки вверх вниз (прокрутка)