Як перейти на верхню сторінку браузера

186

Я пишу модальне спливаюче вікно, і мені потрібен браузер, щоб перейти на верхню частину екрана, коли натиснути відкриту модальну кнопку. Чи є спосіб прокрутити браузер до верху за допомогою jQuery?

— Exitos
джерело

405

Ви можете встановити так scrollTop, як це:

$('html,body').scrollTop(0);

Або якщо ви хочете трохи анімації замість оснащення до верху:

$('html, body').animate({ scrollTop: 0 }, 'fast');

— Нік Крейвер
джерело

1

хороший ... Я раніше використовував плагін scrollTo для jQuery, щоб досягти цього - міг би зберегти трохи коду з вашим кодом ... дякую за урок ;-)

— Zathrus Writer

@MikhailBatcer - відключіть свій CSS і перевірте, чи працює він. У вас може виникнути проблема з тим, як ви розмістили свої теги htmlта bodyтеги. інакше використовувати $(window)замість цього.

— інвот

як додати тривалість анімації-прокрутки?

— Максим Струтинський

139

Без анімації можна використовувати звичайний JS:

scroll(0,0)

За допомогою анімації перевірте відповідь Ніка .

— Ionuț Staicu
джерело

4

Чи підтримується це у всіх браузерах?

— Pacerier

1

scrollзнаходиться в стандарті CSSOM, тоді scrollToяк спочатку було визначено рівень DOM 0 і не є частиною жодного стандарту. Однак CSSOM включає scrollToзворотну сумісність.

— Клінт Пахл

3

Я думаю, що scrollце широко підтримується. Див stackoverflow.com/q/1925671/41906

— Клінт Pachl

Дякую. Я думаю, що window && window.scroll(0,0);це прийнятно на мою думку.

— nrodic

34

Якщо ви використовуєте діалогове вікно інтерфейсу jQuery, ви можете просто стилювати модал, щоб він відображався з положенням, зафіксованим у вікні, щоб воно не вискочило з поля зору, заперечуючи необхідність прокрутки. Інакше

var scrollTop = function() {
    window.scrollTo(0, 0);
};

повинен зробити трюк.

— Silkster
джерело

13

Ви можете це зробити без javascript і просто використовувати якірні теги? Тоді він буде доступний для тих, хто js безкоштовно.

хоча ви користуєтесь модалями, я вважаю, що вам не байдуже бути безкоштовними js. ;)

— S.Kiers
джерело

1

Використання тегів якоря може перервати навігацію на основі хешу.

— Том Ландау

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Розгорніть фрагмент

— Варуна Манджула
джерело

2

Я знаю, що це старе, але для тих, хто має проблеми в Edge:

Звичайний JS: window.scrollTop=0;

На жаль, scroll()і scrollTo()помилки в Edge.

— Джош Поуллісон
джерело

1

ви використовуєте діалогове вікно інтерфейсу jQuery, ви можете просто стилювати модал, щоб він відображався з положенням, зафіксованим у вікні, щоб воно не вискочило з поля зору, заперечуючи необхідність прокрутки. Інший

— гарі
джерело

0

Чисте рішення Javascript

theId.onclick = () => window.scrollTo(top: 0)

Якщо ви хочете плавно прокручувати

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— Могазі
джерело