Как я могу прокрутить до определенного места на странице с помощью jquery?

Question

Можно ли прокрутить до определенного места на странице с помощью jQuery?

Нужно ли иметь местоположение, которое я хочу прокрутить:

<a name="#123">here</a>

Или он может просто перейти к определенному идентификатору DOM?

Answer 1

Плагин jQuery Scroll

так как это вопрос с тегом jquery, я должен сказать, что в этой библиотеке есть очень хороший плагин для плавной прокрутки, вы можете найти его здесь: http://plugins.jquery.com/scrollTo/

Выдержки из документации:

$('div.pane').scrollTo(...);//all divs w/class pane

или же

$.scrollTo(...);//the plugin will take care of this

Пользовательская функция jQuery для прокрутки

Вы можете использовать очень легкий подход, определив пользовательскую функцию JQuery прокрутки

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

и используйте это как:

$('#your-div').scrollView();

Прокрутить до координат страницы

оживлять html а также body элементы с scrollTop или же scrollLeft атрибуты

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Простой javascript

прокрутка с window.scroll

window.scroll(horizontalOffset, verticalOffset);

только чтобы подвести итог, используйте window.location.hash, чтобы перейти к элементу с идентификатором

window.location.hash = '#your-page-element';

Прямо в HTML (улучшения доступности)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Answer 2

Да, даже в простом JavaScript это довольно просто. Вы даете элементу идентификатор, а затем можете использовать его в качестве "закладки":

<div id="here">here</div>

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

<a href="#here">scroll to over there</a>

Чтобы сделать это программно, используйте scrollIntoView()

document.getElementById("here").scrollIntoView()

Answer 3

Нет необходимости использовать любой плагин, вы можете сделать это так:

var divPosition = $('#divId').offset();

затем используйте это для прокрутки документа к определенной DOM:

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Answer 4

Вот чистая версия JavaScript:

location.hash = '#123';

Он будет прокручиваться автоматически. Не забудьте добавить префикс "#".

Answer 5

Простой Javascript:

window.location = "#elementId"

Answer 6

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

В этом примере показано, как найти конкретный идентификатор div, т. Е. В данном случае 'idVal'. Если у вас есть последующие div / таблицы, которые будут открываться на этой странице через ajax, то вы можете назначить уникальные div-ы и вызвать скрипт для прокрутки к определенному месту для каждого содержимого div-ов.

Надеюсь, это будет полезно.

Answer 7

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Answer 8

Попробуй это

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

Answer 9

Вот вариант легкого подхода@juraj-blahunka. Эта функция не предполагает, что контейнер является документом, а прокручивает только если элемент не виден. Анимация очереди также отключена, чтобы избежать ненужного подпрыгивания.

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};

Answer 10

Ты можешь использовать scroll-behavior: smooth; чтобы сделать это без Javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Answer 11

Использование jquery.easing.min.js, с исправленными ошибками консоли IE

Html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

Jquery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });