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

Если вам нужна гладкая прокрутка, попробуйте что-то вроде этого:

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

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

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

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

Для этого вам не нужен 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>

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

в html

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

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

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

Другим решением является метод JavaScript window.scrollTo:

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

Параметры:

• x-значение - это пиксель вдоль горизонтальной оси.
• Значение y - это пиксель вдоль вертикальной оси.

С window.scrollTo(0, 0); работает очень быстро
поэтому я попробовал пример Mark Ursino, но в 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 секунд он исчезает

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

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

Это может вас пошевелить, хотя если вы рассчитываете, что ваш 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();
}

Действительно странный: этот вопрос активен уже пять лет, и все еще нет ответа на ванильный 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

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

document.location.href = "#top";

Работает отлично в FF, IE и Chrome

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

Редактировать:

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

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

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

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

Попробуйте это

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

Не-jQuery-решение/чистый JavaScript:

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

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

window.scrollTo(0, 0);

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

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

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

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

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

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

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

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

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

Короче и просто!

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

window.location = '#'

при нажатии кнопки "Вверх"

Пример демонстрации:

output.jsbin.com/fakumo#

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

мотивация

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

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

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

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

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

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

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

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

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

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

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;
    });
}

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

Попробуйте это

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

Включить весь браузер. Удачи.

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);
        }

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

$('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;
    });
});``

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

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/

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

Для этого вам не нужно использовать javascript. Просто используйте "#" в качестве ссылки в href html-коде.

<a href="#">Top</a>

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

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

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

Как ни странно, большинство из них не работало для меня ВСЕ, поэтому я использовал jQuery-ScrollTo.js с этим:

wrapper.find(".jumpToTop").click(function() {
    $('#wrapper').ScrollTo({
        duration: 0,
        offsetTop: -1*$('#container').offset().top
    });
});

И это сработало. $(document).scrollTop() возвращал 0, и этот фактически фактически работал.

этот код может помочь вам

window.location.href = '#';