Кто-нибудь реализовывал splash — заставку?

@den0820 · Регистрация: 16.11.2013

Студворк — интернет-сервис помощи студентам

Тема нестандартная, но из-за небольшой недоработки вынес себе мозг. Допустим я сделал сплэш - заставку, то есть стартовый экран с адаптивным изображением на весь и стрелочкой внизу и по середине экрана. При клике на эту стрелочку, первый экран, то есть адаптивное изображение "уезжает" вверх и скрывается, с помощью slideUp() и показывается основной экран(блок), все это происходит с помощью анимации, также реализован функционал при скролле первого экрана, также все анимируется и переходим на второй экран с заранее указанным scrollTop = 0. Но в последствии, при скролле контента уже на втором экране(блоке), и обновлении страницы, я не перехожу сразу на первый экран, то есть сплэш-заставку, а сперва поднимаюсь наверх страницы, а потом при повторной перезагрузке уже попадаю на первый экран со сплэш заставкой. Всячески пытался пофиксить этот баг, например, с помощью флагов. Но в итоге получалось что совсем вырубал событие "скролл". Помогите разрешить проблему, кто понял суть идеи! код привожу снизу:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<body class="splash-mode">
        <div id="splash" class="splash fade-in">
            <span class="splash-title fade-in">
                Сплэш - заставка.
            </span>
            <a class="splash-arrow fade-in" href="#">
                <img alt="" src="images/down-arrow.png">
            </a>
        </div>
 
        <div id="wrap" class="wrap" style="opacity: 1;">
            <div class="inner"></div>
            <div class="page">
                <div class="header">
                    <div class="inner"></div>
                </div>
 
                <div class="content">
                    <div class="inner">
                        <h2>Java Script Pro</h2> 
 
                        <nav class="menu">
                            <a href="?page=slider">Слайдер на jQuery</a>
                            <a href="?page=animation">Splash - заставка</a>
                        </nav>
 
                        <h2>Splash - заставка</h2>
 
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
  ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
  vulputate eget, arcu. 
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
  Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
  Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 
  Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. 
  Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. 
  Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. 
  Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. 
  Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. 
  Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc ...
</p>
 
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
  ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
  vulputate eget, arcu. 
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
  Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
  Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 
  Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. 
  Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. 
  Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. 
  Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. 
  Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. 
  Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc ...
</p>
 
<a class="to-main" href="index.php">На главную</a>
                    </div>
                </div>
            </div>
 
            <div class="footer">
                <div class="inner"></div>
            </div>
        </div>
    
</body>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var flag = false;
 
$(document).ready(function() {
  $('.splash-arrow').on('click', function() {
    $('#splash').slideUp(800, function() {
      $('#wrap').delay(100).animate({
        'opacity': 1
      }, 800);
    });
 
    return false;
  });
});
 
 
$(window).scroll(function() {
 
  $(window).off('scroll');
 
  // if(flag) return false;
 
  
  $('#splash').slideUp(800, function() {
    $('html, body').animate({'scrollTop': 0}, 100);
    $('#wrap').delay(100).animate({'opacity': 1}, 800);
  });
  }
});

@BANO · 31.08.2015, 07:43

den0820, есть у некоторых браузеров, например у моего(yandex), такая функция, запоминать скрол на странице, причём не только при перезагрузке
решить это можно либо с помощью якоря, либо сделав собственный красивый скрол, я лично склоняюсь к третьему, так как считаю, что приложения должны иметь свой скрол, а не встроенный, когда приложения какие-то эдакие, тем более скрол можно стилизовать под ваше приложение, что тоже не плохо

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	31.08.2015, 07:43
	den0820, есть у некоторых браузеров, например у моего(yandex), такая функция, запоминать скрол на странице, причём не только при перезагрузке решить это можно либо с помощью якоря, либо сделав собственный красивый скрол, я лично склоняюсь к третьему, так как считаю, что приложения должны иметь свой скрол, а не встроенный, когда приложения какие-то эдакие, тем более скрол можно стилизовать под ваше приложение, что тоже не плохо 0