Сообщений в теме: 4

[miniplaneta]

Добрый день.

В подвале "Весной" предусмотрено размещение достаточно полезной инфы! Отлично и красиво! Теперь логично подцепить еще и всплывающую кнопку "Вниз" аналогичную кнопке "Вверх".

Прикрепленные изображения

• 

[velena168]

+

[Vaccina]

Чтобы установить кнопку "вниз" зайдите в шаблон HTML перед </body> пропишите:

<a href="#" class="go-bottom">Вниз</a>

В main.css(style.css) в самый низ пропишите:

.go-bottom {
position: fixed;
bottom: 2em;
left: 2em;
text-decoration: none;
color: white;
background-color: #000;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
}
.go-bottom:hover {
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}

В конце main.js вставьте:

var wHeight = $(body).height();

$('.go-bottom').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: wHeight}, 300);
})

var bHeight = wHeight - $(window).height();

$(window).scroll(function() {
if ($(this).scrollTop() == bHeight) {

$('.go-bottom').fadeOut(200);
} else {
$('.go-bottom').fadeIn(200);
}
});

[miniplaneta]

Vaccina (08 Март 2014 - 01:34) писал:

Чтобы установить кнопку "вниз" ...

1. Не работает
2. Хотелось бы установить на самый вверх на одну вертикаль с кнопкой вверх
3. Нужен аналогичный дизайн с кнопкой вверх.  Для этого загрузил файл scroll2.png

Прикрепленные изображения

• 

[Vaccina]

Установка двух кнопок вверх\вниз:
В файл HTML перед </body> вставляем:

<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide().removeAttr("href");
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().removeAttr("href");
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>

<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="image/go_up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="image/go_bottom.png" alt="Вниз" title="Вниз">
</a>

Стилизовать кнопки(вставить картинку, изменить положение и прочее) вы можете в файле main.css\style.css в самый низ добавьте:

#Go_Top{
/* стили для кнопки вверх */
}
#Go_Bottom{
/* стили для кнопки вниз */
}