it-roy-ru.com

Прокрутите страницу вверх, используя JavaScript/jQuery?

У меня есть <button> на странице, когда эта кнопка нажата, скрытый <div> показывается с помощью jQuery.

Как прокрутить до верхней части страницы с помощью команды JavaScript/jQuery в этой функции? Желательно, даже если полоса прокрутки мгновенно прыгает наверх. Я не ищу плавной прокрутки.

1383
KingNestor

Если вам не нужно менять анимацию, вам не нужно использовать какие-либо специальные плагины - я бы просто использовал собственный метод JavaScript window.scrollTo - при вводе 0,0 мгновенно прокручивается страница в верхнем левом углу. ,.

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

Параметры 

  • x-координата - это пиксель вдоль горизонтальной оси. 
  • у-координата - это пиксель вдоль вертикальной оси. 
1894
daniellmb

Если вы хотите плавную прокрутку, попробуйте что-то вроде этого:

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

Это возьмет любой тег <a>, чей код href="#top", и сделает плавную прокрутку вверх.

1250
Mark Ursino

Попробуйте это прокрутить сверху

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

Вам не нужен jQuery, чтобы сделать это. Стандартный HTML-тег будет достаточно ...

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

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

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

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

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

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

Лучшее решение с плавной анимацией:

// 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

29
Ganesh Ghalame

Если вы хотите сделать плавную прокрутку, попробуйте это:

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

Другое решение - метод JavaScript window.scrollTo:

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

Параметры:

  • значение x - это пиксель по горизонтальной оси.
  • значение y - это пиксель вдоль вертикальной оси.
28
Gaurang Sondagar
<script>

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

в HTML

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

С 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
это когда клиент нажимает кнопку «Забронировать сейчас» и у него не выбран период аренды, медленно перемещается в верхнюю часть, где находятся календари, и открывает диалоговое окно div, указывающее на 2 поля, через 3 секунды он исчезает

24
Luiggi ZAMOL

Действительно странно: этот вопрос активен в течение пяти лет, и до сих пор нет ответа на Vanilla 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

23
AvL

A lotofusers рекомендуем выбрать теги html и body для кросс-браузерной совместимости, например так:

$('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();
}
22
David Kennedy

Старый #top может сделать трюк 

document.location.href = "#top";

Прекрасно работает в FF, IE и Chrome

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

Правка:

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

Попробуй это

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

$(document).scrollTop(0); также работает.

14
Hari Ganesan

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

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

Это будет работать:

window.scrollTo(0, 0);

10
Santosh Jadi

Попробуйте этот код:

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

div => Dom элемент, в который вы хотите переместить прокрутку.

время => миллисекунды, определить скорость прокрутки.

10
Wasif Ali

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

10
arvinda kumar

Почему бы вам не использовать встроенную функцию JQuery scrollTop:

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

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

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

8
Sandeep Gantait

Просто используйте этот скрипт для прямой прокрутки.

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

Вам не нужен JQuery. Просто вы можете вызвать сценарий

window.location = '#'

по нажатию кнопки «Перейти наверх»

Пример демо: 

output.jsbin.com/fakumo#

PS: не используйте этот подход, когда вы используете современные библиотеки, такие как angularjs. Это может сломать URL hashbang.

7
Sriramajeyam Sugumaran

Если вам не нужна плавная прокрутка, вы можете обмануть и остановить анимацию плавной прокрутки почти сразу же после запуска ... вот так:

   $(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, но сделать другую без анимации? то есть откройте скользящую панель входа администратора в верхней части страницы и сразу же перейдите наверх, чтобы увидеть ее.

6
Jon Story

Мотивация

Это простое решение работает изначально и обеспечивает плавный переход к любой позиции.

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

Решение

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

<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 - это id тега, на который вы хотите перейти после щелчка.

6
Gianluca Casati

Вы можете просто использовать цель из вашей ссылки, например #someid, где #someid - это идентификатор div.

Или, вы можете использовать любое количество плагинов прокрутки, которые делают это более элегантным.

http://plugins.jquery.com/project/ScrollTo является примером.

5
ScottE

Вы можете попробовать использовать JS как в этом Fiddle 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>
4
asertym

Ни один из ответов выше не будет работать в SharePoint 2016.

Это должно быть сделано так: https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4
jeancallisti
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;
    });
}
4
Mardzis

Активен весь браузер. Удачи

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }
3
Anh Tran

Попробуй это

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>
3
Eugeni Bejan

Если вы хотите выделить любой элемент с идентификатором, попробуйте это:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``
2
Alan Kael Ball

Когда верхняя прокрутка сверху меньше, чем нижняя и нижняя прокрутка, верхний колонтитул прикреплен. Ниже см. Fiddle Пример.

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/

1
Musaib Memdu

Просто попробуйте, не нужно других плагинов/фреймворков

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}
<button id="jarscroolbtn">Scroll contents</button> 
html, body {
  scroll-behavior: smooth;
}
0
rajmobiapp

Для прокрутки к элементу и элементу в верхней части страницы

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);
0
Priyanka

document.getElementById("id of what you want to scroll to").scrollIntoView();

0
GameMaster