Форум

Teamur · #1 (**permalink**) 28.06.2015, 15:26

Здравствуйте, уважаемые форумчане!

Кнопка:
<div onclick="up()">НАВЕРХ</div>

Скрипт плавной прокрутки к началу страницы с замедлением:

function up() {
var top = Math.max(document.body.scrollTop,document.document Element.scrollTop);
if(top > 0) {
window.scrollBy(0,((top+100)/-10));
t = setTimeout('up()',20);
} else clearTimeout(t);
return false;
}

Как изменить этот скрипт, чтобы прокрутка выполнялась в конец страницы?

рони · #2 (**permalink**) 28.06.2015, 21:25

Teamur,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    height: 1500px;
    position: relative;
  }
  .up{
     position: absolute; top: 100%;
  }
   div{
     cursor: pointer;
   }

  </style>
  <script>


function animateScroll(dn) {
    var scrollHeight = Math.max(
            document.body.scrollHeight, document.documentElement.scrollHeight,
            document.body.offsetHeight, document.documentElement.offsetHeight,
            document.body.clientHeight, document.documentElement.clientHeight
        ),
        maxScroll = scrollHeight - document.documentElement.clientHeight,
        from = window.pageYOffset || document.documentElement.scrollTop,
        to = dn ? maxScroll : 0,
        duration = 1000,//время прокрутки
        start = new Date().getTime();

    function delta(progress) {
        return progress;
    }
    setTimeout(function t() {
        var now = (new Date().getTime()) - start;
        var progress = now / duration;
        var result = (to - from) * delta(progress) + from;
        if (progress > 1) result = to;
        window.scrollTo(0, result);
        if (progress < 1)
            setTimeout(t, 10);
    }, 10);

}


 </script>
</head>

<body>
<div onclick="animateScroll(true)">ВНИЗ</div>
<div onclick="animateScroll()"  class="up">ВВЕРХ</div>
</body>

</html>

Teamur · #3 (**permalink**) 29.06.2015, 18:27

Спасибо! Всего доброго!

Форум

Справочник

Discord чат

Курсы javascript