Валерий

fotorama.io

Здесь настроек и примочек сколько, что можно книгу писать. )
Очень советую.

Костыльно, но наглядно :)

https://jsfiddle.net/t7L4zs7t/

Просто изменяй число в инпутах и смотри результат.

Согласен с тем, что от клиента должен приходить минимум - id и количество. Которые, вследствие, также нужно проверять.

Может быть Вам чем-то будет полезен метод data в jQuery - Вам все-таки задача виднее. Но если каких-то супер подводных камней нет - лучше не выдумывать велосипед.

1. Указываете нужный и подходящий фон (цвет, градиент, картинки и т.д.) - htmlbook.ru/css/background

2. Настраиваете анимацию - htmlbook.ru/css/transition .

Удобно цеплять анимацию на определенный класс, при этом для старта анимации можно просто дать целевому блоку класс и изменить параметры.

При клике на кнопочку "Скачать в PDF" нужно слать запрос на сервер со всем параметрами отображения таблицы (выбранные фильтры, номер страницы и т.д.), который, в свою очередь, будет генерировать вывод и отдавать с нужными заголовками.

Перекладывать на фронт - очень плохая идея.

<a href="/my-new-project">Перейти к проекту</a>

..или я что-то не понял?

Условно:
Первый экран - #l1
Второй - #l2

"Резкая" прокрутка - это просто по якорям, как я понимаю.
Итого, для ссылок второго экрана можно сделать вот так:

$('#l2').on('click', 'a', function(){
var target = th.attr('href') ;
// если мы нажимаем на ссылку во втором экране - и она ведет на первый - просто переходим по анкору
if( target == '#l1' ){ return true; }
// иначе - делаем анимацию на целевой экран
$("html, body").animate({ scrollTop: $(target).offset().top }, "slow");
});

Может не до конца понял задачу - но попробуй такой вектор решения.

Выбираем первый найденный: jquery.page2page.ru/index.php5/%D0%9F%D0%B5%D1%80%...

ну или дать дополнительный класс к нужному спану и стучать конкретно к нему.

2 дива с разными z-index. В переднем фон - в заднем - картинка. Если решит проблему - могу накидать пример..