StepsOnes

Для этого нужно получить текущий номер страницы из URL, затем заменить его на нужный и обновить страницу с новым URL. Можно сделать так:

$('.scroll_link').on('click', function(e){
    e.preventDefault();
    let href = $(this).attr('href');
    let page = window.location.search.replace('?page=', '') || '1'; // получаем текущий номер страницы из URL
    let newHref = href.replace('?page=', `?page=${page}&`); // заменяем номер страницы на текущий
    window.location.href = newHref; // переходим на новую страницу
});

Затем, на новой странице скроллим к нужному элементу так, как было в первом примере.

Если вы хотите указать полный путь к файлу, то вы можете воспользоваться объектом RequestContext и получить текущий контекст запросов. Затем вы можете использовать метод getContextPath() для получения корневого пути и объединить его с путем к файлу из базы данных.

Пример:

<#assign requestContext = request.contextPath> //получаем корневой путь
<#list images as image>
    <img src="${requestContext}${image.path}/${image.name}" alt="${image.originalFileName}">
</#list>

Проблема заключается в том, что при быстрых кликах на кнопку, очередные вызовы функции `translateY()` начинаются еще до того, как завершится предыдущая анимация (и соответственно, "transitionend" не успевает сработать). Это приводит к созданию множества слушателей события transitionend на одном элементе, что затрудняет правильную работу анимации при последующих кликах.

Для решения этой проблемы можно добавить проверку наличия класса "translate" на элементе, перед добавлением его на кнопку. Если класс уже присутствует, то следует пропустить выполнение функции и не добавлять новый слушатель события transitionend:

function translateY(e) {
  if (!e.classList.contains('translate')) {
    e.classList.add('translate');
    e.addEventListener('transitionend', function handler() {
      e.classList.remove('translate');
      e.removeEventListener('transitionend', handler);
    });
  }
}

В этом коде мы проверяем, не содержится ли наш элемент класса "translate" перед добавлением этого класса. Далее, если класса нет, то мы добавляем слушатель события transitionend, и при завершении анимации удаляем слушатель и удаляем класс "translate" с элемента.

Такой подход обеспечивает правильную работу анимации при быстрых кликах на кнопку.

Отмечу, что в целом, использование js для реализации простой анимации как в данном примере может считаться избыточным. В большинстве случаев, на такие анимации можно обойтись использованием только css (как вы и отметили, через псевдоклассы, например :active).

button {
  border: none;
  background: transparent;
}

Textolite - https://textolite.ru/

Спустя 2 часа поисков нашел эту статью, может кому пригодиться

Нашел проблему, указал родителю слайдера фиксированную ширину вместо max-width