Блог

Главная - Вопросы по программированию - Прокрутка веб-сайта через окно.Прокрутка

Прокрутка веб-сайта через окно.Прокрутка

#javascript #html #css

#javascript #HTML #css

Вопрос:

Привет, ребята, я пытался прокрутить веб-сайт, добавив небольшой фрагмент кода в элемент inspect.

Код

 function pageScroll() {
    window.scrollBy(0,50); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

<a href="javascript:pageScroll()">Scroll Page</a>

Когда я добавляю этот код в элемент проверки, ссылка появляется на веб-странице, но она не прокручивается вниз..

Надеюсь, вы, ребята, сможете мне помочь ..!!!

Ответ №1:

 <html>
<body>
<script>
   function pageScroll() {
    window.scrollBy(0,50); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
    }
</script>
 <a href="javascript:pageScroll()">Scroll Page</a>
  <p>some really large content for scrolling ....</p>
</body>
</html>

Приведенный выше код работает нормально.

Ответ №2:

На веб-сайте, с которого вы получили код, он работает правильно.

Что-то на вашей странице глупо?

И если вы пытаетесь прокрутить чужую страницу с помощью этого (например, ввести ее в консоль), вам придется вызвать pageScroll() функцию следующим образом:

 function pageScroll() {
//code
}
pageScroll();

и исключите <a href=... глупость.

Ответ №3:

Я всегда использую это решение jQuery для анимации прокрутки. Вам нужно добавить элемент с идентификатором в то место, куда вы хотите прокрутить, а затем вызвать функцию с этим идентификатором

Если вы хотите, вы также можете изменить URL-адрес страницы и заголовок с помощью history.js

HTML:

 <a href="javascript:ScrollToHash('content');">Scroll to panel</a>

...

<div id="content" data-title="Page title here">

Скрипт:

 function ScrollToHash(hash) {

var id = hash.replace('#', '');

if ($('#'   id).length > 0) {

    var top = $('#'   id).offset().top;

    if (id == "home") { top = 0; }

    $('html, body').animate({
            scrollTop: top
    }, 500, function () { // do something on complete function });

// Optional: Change page URL and title with history.js
    var ttl = $('#'   id).attr("data-title")   ' - Marbles';
    History.pushState(null, ttl, $('#'   id).attr("data-page-url"));
    $("title").text(ttl);

}

}

Метки: