Как перейти к элементу с помощью JQuery?

Question

Я хочу, чтобы страница прокручивалась до элемента div, находящегося вверху страницы.У меня есть кнопки для других частей страницы, но это не работает, когда я прокручиваю вниз и нажимаю на кнопку, она не переходит в верхнюю часть страницы.Вот кодовая ручка: https://codepen.io/Filizof/pen/xygWyp?editors=1010

$(document).ready(function() {
$("#btn1").click(function() {
$("body").scrollTo("#menudiv");
});
});

Answer 1

ОТВЕТ JAVASCRIPT:

Если вы хотите плавно перейти к элементу с помощью «чистого JavaScript», вы можете сделать что-то вроде этого:

document.querySelector('#menudiv').scrollIntoView({
  behavior: 'smooth' 
});

пример: https://codepen.io/anon/pen/OBzbdY

ПРИМЕЧАНИЕ. Информацию о поддержке новейших браузеров см. В https://caniuse.com/#feat=scrollintoview.

---

JQUERY ОТВЕТ:

Если вы хотите плавно прокрутить элемент, используя «jquery», вы можете сделать что-то вроде:

$(document).ready(function() {
  $("#btn1").click(function() {
    $("body,html").animate(
      {
        scrollTop: $("#menudiv").offset().top
      },
      800 //speed
    );
  });
});

пример: https://codepen.io/anon/pen/MPrJjo

Answer 2

У меня была небольшая проблема из-за какого-то плагина markdownify, в любом случае мне пришлось искать цель ссылки, поэтому я использовал эту работу вокруг.Это на самом деле работает для различных селекторов элементов, в моем случае моя ссылка была <a href="#target">some text</a>, а моя реальная цель была <a href="target"></a> для этого конкретного случая, я могу дать вам такое решение:

var scrollAnchorSamePage = function() {
    $('a[href^="#"]').click(function() {
      event.preventDefault();
      var id  = $(this).attr("href");

      // okay lets remove the hashtag in front:
      var target = $('a[href^="' + id.substring(1, id.length) + '"]');

      // and I need a little offset due to a fixed sticky header by 140
      $('html, body').animate({ scrollTop: target.offset().top - (160)  }, 1000);
    });
}

scrollAnchorSamePage();

PS: Iиспользуйте следующий импорт пакетов jQuery, вы можете добавить их прямо перед закрывающим тегом </body> html в вашей DOM.

<!-- Latest minified jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 3

Я немного обновляю ваш код, он должен быть

 $(document).ready(function() {
  $("#btn1").click(function()
 {
   var elmnt = document.getElementById("menudiv");
   elmnt.scrollIntoView();
 });
});

Чтобы перейти к элементу div / element, это метод HTML DOM scrollIntoView, это не функция JQuery.

Вот код ручки JS Выделите элемент

Answer 4

<script type="text/javascript" src="jquery-3.2.1.js">

заменить на

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 5

JavaScript имеет функцию element.scrollIntoView().

что-то вроде:

$("#menudiv")[0].scrollIntoView()

Answer 6

Вы можете использовать простой JS, чтобы сделать это.scrollIntoView () прокручивает до видимой области.

Примерно так:

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Answer 7

Проверьте это: https://codepen.io/anon/pen/ePyzoj?editors=1010

 $("#btn1").click(function() {
   $([document.documentElement, document.body]).animate({
        scrollTop: $("#menudiv").offset().top
    }, 2000);
  });