Как сделать такой же js скрипт который поднимает таб вверх?

Question

[Константин]

Подскажите, в каком ключе искать ключ или как это называется.

На сайте detskiy-vrach.com/price при нажатии на ТАБ (спойлер) (если он в середине экрана), то скрипт поднимет его вверх. Очень удобная штука, хочу себе реализовать подобное.

Comments

[Дмитрий]

В данном примере

$('.price').click(function(){
		$('.price').removeClass('open');
		$(this).addClass('open');
		
		$("html, body").animate({ scrollTop: $(this).offset().top }, 300);
	});

Answer 1

[Moses Fender]

Да приделай всем элементам сразу:

if (!Element['scrollMe']) {
    Element.prototype['scrollMe'] = function () {
        window.scrollTo({
            top: this.offsetFrom(document.body).top,
            left: this.offsetFrom(document.body).left,
            behavior: 'smooth'
        });
    };
}

А там уж хоть чучелком, хоть через что-то:
<div onclick="this.scrollMe()">чтототам</div>

UPD. Забыл Element.offsetFrom() написать.

Element.prototype['offsetFrom'] = function (element) {
    var ret = {};
    var currentBounds = this.getBoundingClientRect();
    var elementBounds = element.getBoundingClientRect();
    ret.top = currentBounds.top - elementBounds.top;
    ret.left = currentBounds.left - elementBounds.left;
    ret.bottom = currentBounds.bottom - elementBounds.bottom;
    ret.right = currentBounds.right - elementBounds.right;
    ret.topHeight = ret.top + currentBounds.height;
    ret.leftWidth = ret.left + currentBounds.width;
    return ret;
};

Comments

[Константин]

что то не работает https://vitalisspb.ru/testovaja/

[Moses Fender]

А что вот сие в коде документа означает?

<p>Element.prototype['offsetFrom'] = function (element) {
    var ret = {};
    var currentBounds = this.getBoundingClientRect();
    var elementBounds = element.getBoundingClientRect();
    ret.top = currentBounds.top - elementBounds.top;
    ret.left = currentBounds.left - elementBounds.left;
    ret.bottom = currentBounds.bottom - elementBounds.bottom;
    ret.right = currentBounds.right - elementBounds.right;
    ret.topHeight = ret.top + currentBounds.height;
    ret.leftWidth = ret.left + currentBounds.width;
    return ret;
};</p>
<p>if (!Element['scrollMe']) {
    Element.prototype['scrollMe'] = function () {
        window.scrollTo({
            top: this.offsetFrom(document.body).top,
            left: this.offsetFrom(document.body).left,
            behavior: 'smooth'
        });
    };
}</p>
<p></script></p>

Это ж надо скриптом делать. Желательно пораньше, чем DOM будет создан.

[Константин]

Moses Fender, ой это редактор встроенный так делает, сейчас перенесу в шаблон

[Константин]

Moses Fender, вроде заработал) перекидывает куда то , но пока не понял куда и зачем)) думал к верху страницы будет перепрыгивать див.

[Moses Fender]

кверху и перепрыгивает.