Прокрутіть до початку сторінки за допомогою JavaScript?

Як я прокручую вгору сторінки за допомогою JavaScript? Бажано, навіть якщо смуга прокрутки миттєво стрибає на вершину. Я не шукаю плавного прокручування.

Якщо вам не потрібні зміни для анімації, то вам не потрібно використовувати будь-які спеціальні плагіни - я б просто скористався нативним JavaScript window.scrollДля того, щоб перейти в 0,0, миттєво прокрутіть сторінку вліво вліво .

window.scrollTo(x-coord, y-coord);

Параметри

• x-координата - піксель вздовж горизонтальної осі.
• y-координата - піксель уздовж вертикальної осі.

Якщо ви хочете плавно прокручувати, спробуйте щось подібне:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Це візьме будь-який <a>тег, чий href="#top"і плавно прокрутить до вершини.

Спробуйте це прокрутити зверху

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Краще рішення з плавною анімацією:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Довідка: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Для цього вам не потрібен jQuery. Стандартного тегу HTML буде достатньо ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Усі ці пропозиції чудово підходять для різних ситуацій. Для тих , хто знаходить цю сторінку з допомогою пошуку, можна також дати це спробувати. JQuery, немає плагіна, прокрутіть до елемента.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

плавна прокрутка, чистий javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Редагувати:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Ще один спосіб прокрутки з верхнім і лівим полем:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

в html

<a href="#top">go top</a>

Дійсно дивно: це питання активне вже п’ять років, і досі немає відповіді на ванільний JavaScript, щоб анімувати прокрутку… Тож ось вам:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Якщо вам подобається, ви можете зафіксувати це у функції та викликати це через onclickатрибут. Перевірте цю jsfiddle

Примітка. Це дуже базове рішення і, можливо, не найефективніше. Дуже детальний приклад можна знайти тут: https://github.com/cferdinandi/smooth-scroll

Якщо ви хочете зробити плавну прокрутку, спробуйте:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Ще одне рішення - JavaScript window.scrollДля методу:

 window.scrollTo(x-value, y-value);

Параметри:

• x-значення - піксель вздовж горизонтальної осі.
• y-значення - піксель уздовж вертикальної осі.

З window.scrollTo(0, 0);дуже швидко,
тому я спробував приклад Марка Урсіно, але в Chrome нічого не відбувається,
і я знайшов це

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

перевірено всі 3 браузери, і він працює,
я використовую програму css blueprint.
Це коли клієнт натискає кнопку "Забронювати зараз" і не вибрано період оренди, повільно рухається до вершини, де є календарі, і відкриває діалогове вікно, яке вказує на 2 поля, після 3сек

Багато з користувачів рекомендується вибирати як HTML , і тіло теги для крос-браузерної сумісності, наприклад , так:

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

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

Якщо це для вас проблема, ви можете зробити щось подібне:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

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

Причина цього працює в Chrome $('html').scrollTop()повертає 0, але не в інших браузерах, таких як Firefox.

Якщо ви не хочете чекати, коли анімація завершиться, якщо смуга прокрутки вже вгорі, спробуйте:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

Старий #topможе зробити трюк

document.location.href = "#top";

Відмінно працює у FF, IE та Chrome

Спробуйте це

<script>
    $(window).scrollTop(100);
</script>

$(document).scrollTop(0); також працює.

Рішення без jQuery / чистий JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Це спрацює:

window.scrollTo(0, 0);

Спробуйте цей код:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Елемент Дому, куди потрібно перемістити прокрутку.

time => мілісекунд, визначте швидкість прокрутки.

Чому ви не використовуєте вбудовану функцію JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

Короткий і простий!

Вам не потрібен JQuery. Просто ви можете зателефонувати за сценарієм

window.location = '#'

при натисканні на кнопку "Перейти вгору"

Приклад демонстрації:

output.jsbin.com/fakumo#

PS: Не використовуйте цей підхід, коли ви використовуєте сучасні бібліотеки, такі як angularjs. Це може порушити URL-адресу хешбангу.

Просто використовуйте цей скрипт для прокрутки до верхнього прямого.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

Чисте рішення JavaScript:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Я пишу анімаційне рішення на Codepen

Також ви можете спробувати інше рішення з scroll-behavior: smoothвластивістю CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Якщо ви не хочете плавного прокручування, ви можете обдурити і зупинити анімацію плавної прокрутки, як тільки ви її запустите ... так:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Я не маю уявлення, рекомендується чи дозволено, але це працює :)

Коли ви використовуєте це? Я не впевнений, але, можливо, коли ви хочете скористатися одним клацанням, щоб анімувати одне з Jquery, але зробити інше без анімації? тобто відкрийте панель для входу в адміністратор для слайдів у верхній частині сторінки та миттєво перейдіть до вершини, щоб побачити її.

Мотивація

Це просте рішення працює на самоті і реалізує плавну прокрутку до будь-якої позиції.

Це дозволяє уникати використання прив’язних посилань (тих, що мають #), які, на мою думку, є корисними, якщо ви хочете зробити посилання на якийсь розділ, але в деяких ситуаціях не так зручно, особливо при вказівці вгору, що може призвести до двох різних URL-адрес, що вказують на те саме розташування ( http://www.example.org та http://www.example.org/# ).

Рішення

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

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Тоді як кнопку можна використовувати посилання, просто відредагуйте атрибут onclick таким кодом.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

Де аргументом document.getElementByIdє ідентифікатор тегу, до якого потрібно прокрутити після клацання.

Ви можете просто використовувати ціль зі свого посилання, наприклад, #someid, де #someid - ідентифікатор div.

Або ви можете використовувати будь-яку кількість плагінів прокрутки, які роблять це більш елегантним.

http://plugins.jquery.com/project/ScrollTo - приклад.

Ви можете спробувати використовувати JS, як у цій скрипці http://jsfiddle.net/5bNmH/1/

Додайте кнопку "Перейти вгору" у нижньому колонтитулі сторінки:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Жодна з наведених вище відповідей не працюватиме в SharePoint 2016.

Це потрібно зробити так: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;