ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопка вверх с плавной прокруткой в CSS

Кнопка вверх с плавной прокруткой в CSS

Такая функция, как кнопка вверх, будет отличным приложением для сайта, так как по клику можно поднять страницу, где присутствует плавная прокрутка. Основном когда посетитель заходит на сайт, то он иногда смотрит такой функционал, если ранее его закрепляли под дизайн портала. То сейчас он полностью автоматически, где самому веб мастеру легко изменить стилистику.

По умолчанию она идет в темно прозрачном виде, если на вам сайт такой цвет не сильно подходит, то в CSS не сложно поставить другую гамму. И безусловно для отличного функционала применяют такой вид кнопки, которую можно увидеть как по правую сторону, так и по левую, все повторюсь это настраивается в стилях. Здесь изначально поставлена по правую сторону и немного приподнята, что не у самого низа будет находиться.

Ранее она стояла на этом сайте, где них был в темном цвете, что когда доходила до него, то полностью сливалась. Пришлось сделать обвод и поставит несколько пикселей, где также присутствуют тени, что сразу тала отлично просматривается.

Приступаем к установке:

Код

<a href="#" class="scrollup"></a>
<script type="text/javascript">
  $(document).ready(function(){
  $(window).scroll(function(){
  if ($(this).scrollTop() > 700) {
  $('.scrollup').fadeIn();
  } else {
  $('.scrollup').fadeOut();
  }
  });
  $('.scrollup').click(function(){
  $("html, body").animate({ scrollTop: 0 }, 600);
  return false;
  });
  });
</script>

CSS

Код

/*Knopka Verx*/
.scrollup{width:40px;height:40px;position:fixed;bottom: 185px;right:25px;display:none;text-indent:-9999px;background: url('http://zornet.ru/ZORNET/drental/vverkh.png') no-repeat;opacity: 0.7;border: 2px solid rgba(197, 192, 192, 0.44);border-radius: 53px;}
.scrollup:hover{opacity:0.7;border-radius: 50%;box-shadow: 0 0px 13px #393c40;}

Сама кнопка будет занимать очень мало место, также под нее выставлен класс, к которым поставлены значение, это как поставить по форме, а точнее оставить круглой или кому нужно квадратной. Да и сама установка простая, если вам необходимо, чтоб работала на всех страницах. то скрипт ставим в низ сайта.

11 Декабря 2018 Просмотров: 990 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0