Почему не работает скролл до элемента на JavaScript?

Question

[rinatoptimus]

Нажимая на кнопку, должен произойти скролл до определенного элемента на странице. Нашел такое:

function ScrollTo(name) {
		  ScrollToResolver(document.getElementById(name));
		}

		function ScrollToResolver(elem) {
		  var jump = parseInt(elem.getBoundingClientRect().top * .2);
		  document.body.scrollTop += jump;
		  document.documentElement.scrollTop += jump;
		  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
		    elem.lastjump = Math.abs(jump);
		    setTimeout(function() {
		      ScrollToResolver(elem);
		    }, "100");
		  } else {
		    elem.lastjump = null;
		  }
		}

<button type="submit" onclick="ScrollTo('page-title-not-auth')"></button>

Работает не совсем корректно: Cannot read property 'getBoundingClientRect' of null

Пробовал scrollIntoView, но надо, чтоб элемент, до которго надо доскроллить, оказывался у самого верха страницы.

Answer 1

[Евгений Калибров]

elem.getBoundingClientRect().top * .2

А зачем тут умножение на 0.2 ?

А вообще тут можно вообще обойтись без скрипта, просто используйте ссылки с якорями - (htmlbook.ru/samhtml/yakorya)

А если вам нужен плавный скролл, то можно на Jquery так сделать:

$('button[type="submit"]').click(function() {
    $('html, body').animate({
        scrollTop: $("#page-title-not-auth").offset().top
    }, 1000);
});

Comments

[rinatoptimus]

Якорь только со ссылками используется? Надо, чтоб по клику на кнопку скролл происходил. На Jquery все работает, на js никак не получается.

[Евгений Калибров]

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

<button type="submit" onclick="scrollTo('page-title-not-auth')"></button>
............
............
<div id="page-title-not-auth"></div>

function scrollTo(id) {
     location.href = "#" + id;
}