Как добавить отдельную страницу в скролл?

@SD163 · Регистрация: 25.08.2018

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

Есть вариант скроллинг по секциям.
Секции находятся в одном файле - странице index.
Хочу попробовать при скролле переключение по файлам.

пример как сделать по секциям
https://smartlanding.biz/poblo... rutka.html
пример демо по секциям
https://smartlanding.biz/demo/fullpage/#home

Как добавить в общий скролл отдельную страницу portfolio.hyml , а секцию portfolio удалить из файла index.html

Добавлено через 11 минут
Кто знает, но молчит?

Добавлено через 37 минут
В 2016 человек то же спрашивал подобный вопрос, но ни кто толком не ответил.
Да же ссылку на аналог дал - там при скролле добавляются секции, а в конце добавляется новая страница.
http://invest.tatarstan.ru/#start

Может все таки кто нибудь знает, есть ли такой плагин или с плагином fullpage что то, как то добавить в html?

Добавлено через 2 часа 49 минут
Может кому понадобится - infinity scroll
https://infinite-scroll.com/demo/full-page/
еще
https://scrollsample.appspot.com/items
Буду разбираться

Добавлено через 2 часа 52 минуты
Честно говоря не получается у меня запустить infinite-scroll - не переключается на 2ю страницу.
Кто подскажет что не так?

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" media="all" href="style.css" />
    <!-- ПОДКЛЮЧЕНИЕ БИБЛИОТЕКИ JQUERY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- АЛЬТЕРНАТИВА - ПРОВЕРИТЬ ПОСЛЕДОВАТЕЛЬНОСТЬ ВКЛЮЧЕНИЯ -->
    <script src="C:/Users/HOME/Desktop/MENU/img/jquery-3.3.1.min.js"></script>
 
    
    
    
  <title>Infinite Scroll · Masonry images</title>
<script src="js/infinite-scroll.pkgd.min.js"></script>
 
 
    <link rel="stylesheet" href="css/infinite-scroll-docs.css?5" media="screen">
 
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@metafizzyco">
    <meta name="twitter:title" content="Infinite Scroll · Masonry images">
    <meta property="og:url" content="index.html">
    <meta property="og:type" content="article">
    <meta property="og:title" content="Infinite Scroll · Masonry images">
    <meta property="og:site_name" content="Infinite Scroll">
    <meta name="twitter:image" content="https://infinite-scroll.com/img/infinite-scroll-illo.png">
    <meta property="og:image" content="https://infinite-scroll.com/img/infinite-scroll-illo.png">
 
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/8B64D3F6-5959-
3942-A87F-E55DCF1B6B77/main.js" charset="UTF-8">
 
</script>
 
 
</head>
 
<body>
 
<ol class="site-nav">
  <li class="site-nav__item site-nav__item--homepage">
    <a href="https://www.cyberforum.ru/../.">Infinite Scroll</a>
  </li>
  <li class="site-nav__item site-nav__item--options">
    <a href="https://www.cyberforum.ru/../options.html">Options</a>
  </li>
  <li class="site-nav__item site-nav__item--api">
    <a href="https://www.cyberforum.ru/../api.html">API</a>
  </li>
  <li class="site-nav__item site-nav__item--events">
    <a href="https://www.cyberforum.ru/../events.html">Events</a>
  </li>
  <li class="site-nav__item site-nav__item--extras">
    <a href="https://www.cyberforum.ru/../extras.html">Extras</a>
  </li>
  <li class="site-nav__item site-nav__item--license">
    <a href="https://www.cyberforum.ru/../license.html">License</a>
  </li>
</ol>
 
 
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
 
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
<div class="container">
  <article class="post">..0000000000000000000000000000000000000000.</article>
  <article class="post">.0000000000000000000000000000000000000000..</article>
  <article class="post">.11111111111111111111111111111111111111111..</article>
</div>
 
 
      <p class="pagination">
        <a class="pagination__next" href="page2.html">Next page</a>
      </p>
 
      
 <script>
var elem = document.querySelector('.container');
var infScroll = new InfiniteScroll( elem, {
  // options
  path: '.pagination__next',
  append: '.post',
  history: false,
});
 
// element argument can be a selector string
//   for an individual element
var infScroll = new InfiniteScroll( '.container', {
  // options
});
</script>
 
<script src="js/infinite-scroll-docs.min.js?3"></script>
</body>
</html>

https://infinite-scroll.com/options.html
По инструкции ни понятно

@SD163 · 30.09.2018, 04:09 **[ТС]**

КОРОЧЕ ЗАПУСТИЛ.
Но это все ни то (сразу не обратил внимания на ползунок - он уменьшается с каждой подгрузкой) - по сути бесконечная подгрузка страниц получается и в итоге увеличивается нагрузка.
Единственное fullpage более менее, но это то ли переключение секций, то ли они все загружены и просто перелистывание между собой - ни понятно - ползунка нет - добавить не получилось.
Модераторы - подскажите как сделать постраничный скролл.

@SD163 · 01.10.2018, 10:24 **[ТС]**

Плагин pagescroll.js - ошибся, имел ввиду fullPage.js. Хотя по сути то же самое.
Посмотрел pagescroll.js - меньше и проще.
Все таки залез в fullPage.js нашел где включить полосу прокрутки. В общем как и предполагал - это всего лишь украшательство. Страница все равно остается единой и если она длинная, то ни как ни сокращает объем нагрузки.

Вопрос остался открытым. Как сделать переключение скроллом по разным страницам (отдельным файлам)?

Добавлено через 12 минут
аналог - в конце добавляется новая страница ABOUT.
http://invest.tatarstan.ru
Как добавляется новая страница ABOUT - Кто знает секрет - Поделитесь

Добавлено через 10 часов 30 минут
Врнулся к инфинити. Есть там функция не бесконечный скролл, а с обновлением новой страницы. Только ни как не запущу ее. Страницы меняются, но экран не обновляется. Ни знаю где менять настройки в функции скрипта - урлы и т.п.

Добавлено через 1 минуту

Добавлено через 58 секунд
Может кто другие варианты подскажет.

@Kraken73 · 01.10.2018, 10:36

SD163,
а в чем собсна проблема,
в fullPage есть события, подберите нужное, и когда слайд окажется последним и человек проскролит вниз, то

JavaScript
1
window.location = 'url';

а если и без плагина, отследите скролл, если скролить не куда покажите блок перехода, и если человек еще раз проскролит, то переводите его (код выше)

@SD163 · 01.10.2018, 12:13 **[ТС]**

******73,
вариант 1 (infinite-scroll) - здесь нужно что то менять или ставить как есть?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var elem = document.querySelector('.container');
var infScroll = new InfiniteScroll( elem, {
  // options
  path: '.pagination__next',
  append: '.post',
  history: false,
});
 
// element argument can be a selector string
//   for an individual element
var infScroll = new InfiniteScroll( '.container', {
  // options
});

Если как есть почему нет обновления экрана?

вариант 2 (fullPage) - ставлю функцию window.location = 'page2.html'; и у меня сразу при старте index.html перебрасывает на page2.html. Полезу в события - знать бы только, что менять

.

Добавлено через 1 час 7 минут
******73, вариант 2 (fullPage) - по моему
нашел только это - anchors: - ockAnchors:
переключение скроллом по разным страницам (отдельным файлам) - ни нашел.
Может я просто не вижу в списке - отключить добавление и включить заменить.
window.location = 'page2.html' то же как ставить если он сразу стартует?

@Kraken73 · 01.10.2018, 12:13

Сообщение от SD163

ставлю функцию window.location = 'page2.html'; и у меня сразу при старте index.html перебрасывает на page2.html

может быть потому что по условиям нужно это делать?

Сообщение от SD163

Полезу в события - знать бы только, что менять

в доках приведены эвенты, посмотрите когда который срабатывает(можете через console.log()) и определите который вам нужен, и уже в нем логику перехода напишите.

@SD163 · 01.10.2018, 12:14 **[ТС]**

******73, Где ? Можно ткнуть пальцем.https://github.com/alvarotrigo... 0%B8%D0%B8

@Kraken73 · 01.10.2018, 12:20

SD163, вот

@SD163 · 01.10.2018, 15:03 **[ТС]**

******73, Короче я еще до этого не дорос - либо ни понимаю, либо это все таки построение по секциям в одном файле и мне это ни подходит. Я ни смог заставить переключиться на другую страницу.
В инфинити хотя бы заставил перейти на новую страницу - только экран не обновляется.
Что делать то, добрый человек, подскажи - напиши, что конкретно вставить. Я не кодер - языка не знаю. Делаю себе сайт сам. От CMSотказался много туфты.

@Kraken73 · 01.10.2018, 15:22

Сообщение от SD163

Я не кодер - языка не знаю

Тогда как вы собираетесь сайт делать?

Сообщение от SD163

От CMSотказался много туфты

ну и зря, зачем делать сайт самому, если не знаете как

@SD163 · 01.10.2018, 15:54 **[ТС]**

******73, А как не отказаться, если возможности все урезаны по полной программе. Элементарно логотип нельзя подвинуть туда, куда нужно. А сам - подвинул туда, сюда - это же свобода творчества. Там же все в жестких рамках - только так и все.

@Kraken73 · 02.10.2018, 08:11

Сообщение от SD163

Элементарно логотип нельзя подвинуть туда, куда нужно

ни разу такого не встречал, все CMS с которыми работал, отзывчивые и настраиваемые

@SiarheiSiarhei · 02.10.2018, 09:20

iframe,
object,
embed
а, так не проще...

@Kraken73 · 02.10.2018, 09:57

SiarheiSiarhei,
это совсем не то, что надо автору

@SD163 · 02.10.2018, 13:29 **[ТС]**

Как сделать перенаправление через window.location в конце страницы скроллом?

Добавлено через 12 минут

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
<div class="container">
        <article class="post">
            test1
        </article>
         <article class="post">
            test2
        </article>
         <article class="post">
            test3
        </article>
         <article class="post">
            test4
        </article>
         <article class="post">
            test5
        </article>
         <article class="post" id="link">
            test6
        </article>
        
        <p class="pagination">
            <a class="pagination__next" href="page2.html"></a>
        </p>
    </div>

page2.html лежит в корне, рядом с index.html
Через замену window на название последнего блока с подключением юрика
$('#link').location = "page2.html"- не получается.
$('.pagination').location = "page2.html"- не получается.
$('.pagination__next').location = "page2.html"- не получается.

Добавлено через 1 час 34 минуты
******73, Есть что подсказать?

@Kraken73 · 02.10.2018, 15:21

Сообщение от SD163

******73, Есть что подсказать?

я вам подсказал уже выше

@SD163 · 12.10.2018, 03:49 **[ТС]**

ВОТ ТАК РАБОТАЕТ, НО ХОЧЕТСЯ ПЛАВНЕЙ
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.location.href = "http://google.de";
}
};

Есть аналогичный вариант?

@SD163 · 15.10.2018, 06:04 **[ТС]**

******73, Вот такой скролл страниц получился Есть ли подобная альтернатива window.onscroll?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	30.09.2018, 04:09 [ТС]
	КОРОЧЕ ЗАПУСТИЛ. Но это все ни то (сразу не обратил внимания на ползунок - он уменьшается с каждой подгрузкой) - по сути бесконечная подгрузка страниц получается и в итоге увеличивается нагрузка. Единственное fullpage более менее, но это то ли переключение секций, то ли они все загружены и просто перелистывание между собой - ни понятно - ползунка нет - добавить не получилось. Модераторы - подскажите как сделать постраничный скролл. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	01.10.2018, 10:24 [ТС]
	Плагин pagescroll.js - ошибся, имел ввиду fullPage.js. Хотя по сути то же самое. Посмотрел pagescroll.js - меньше и проще. Все таки залез в fullPage.js нашел где включить полосу прокрутки. В общем как и предполагал - это всего лишь украшательство. Страница все равно остается единой и если она длинная, то ни как ни сокращает объем нагрузки. Вопрос остался открытым. Как сделать переключение скроллом по разным страницам (отдельным файлам)? Добавлено через 12 минут аналог - в конце добавляется новая страница ABOUT. http://invest.tatarstan.ru Как добавляется новая страница ABOUT - Кто знает секрет - Поделитесь Добавлено через 10 часов 30 минут Врнулся к инфинити. Есть там функция не бесконечный скролл, а с обновлением новой страницы. Только ни как не запущу ее. Страницы меняются, но экран не обновляется. Ни знаю где менять настройки в функции скрипта - урлы и т.п. Добавлено через 1 минуту Добавлено через 58 секунд Может кто другие варианты подскажет. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	01.10.2018, 12:14 [ТС]
	******73, Где ? Можно ткнуть пальцем.https://github.com/alvarotrigo... 0%B8%D0%B8 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 612
	01.10.2018, 12:20
	SD163, вот 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	01.10.2018, 15:03 [ТС]
	******73, Короче я еще до этого не дорос - либо ни понимаю, либо это все таки построение по секциям в одном файле и мне это ни подходит. Я ни смог заставить переключиться на другую страницу. В инфинити хотя бы заставил перейти на новую страницу - только экран не обновляется. Что делать то, добрый человек, подскажи - напиши, что конкретно вставить. Я не кодер - языка не знаю. Делаю себе сайт сам. От CMSотказался много туфты. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	01.10.2018, 15:54 [ТС]
	******73, А как не отказаться, если возможности все урезаны по полной программе. Элементарно логотип нельзя подвинуть туда, куда нужно. А сам - подвинул туда, сюда - это же свобода творчества. Там же все в жестких рамках - только так и все. 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	02.10.2018, 09:20
	iframe, object, embed а, так не проще... 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 612
	02.10.2018, 09:57
	SiarheiSiarhei, это совсем не то, что надо автору 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	12.10.2018, 03:49 [ТС]
	ВОТ ТАК РАБОТАЕТ, НО ХОЧЕТСЯ ПЛАВНЕЙ window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { window.location.href = "http://google.de"; } }; Есть аналогичный вариант? 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	15.10.2018, 06:04 [ТС]
	******73, Вот такой скролл страниц получился Есть ли подобная альтернатива window.onscroll? 0