Добро пожаловать, Гость!
Как сохранить позицию скролла? - Страница 1
Общие вопросы | Как сохранить позицию скролла?
-MiSHuTkA- :
Как правильно реализовать в DCMS ?
Нужно чтоб при обновлении сохранялось положениее прокрутки скрола
Обновить страницу и сохранить положение прокрутки вобщем нада и
после отправки формы сохранить позицию скролла
Как сохранить позицию скролла?
9 Ноября 2021Как правильно реализовать в DCMS ?
Нужно чтоб при обновлении сохранялось положениее прокрутки скрола
Обновить страницу и сохранить положение прокрутки вобщем нада и
после отправки формы сохранить позицию скролла
Комментарии:
DoR 10 Ноября 2021
-MiSHuTkA-, Привет. Молодец
А спасибо говори Энмеркар, он то тебе изначальный код дал.
--- Вот простенький пример.
<sсript>
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
// --- отменяем переход по ссылке
event.preventDefault();
// --- получаем идентификатор бока с атрибута href
var id = $(this).attr('href'),
// --- узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
// --- анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({scrollTop: top}, 1500);
});
});
</sсript>
Если не будет получается, скачай архив.
В нём рабочий пример...)
example (1.39Kb)
-MiSHuTkA-, Привет. Молодец
А спасибо говори Энмеркар, он то тебе изначальный код дал.
--- Вот простенький пример.
<sсript>
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
// --- отменяем переход по ссылке
event.preventDefault();
// --- получаем идентификатор бока с атрибута href
var id = $(this).attr('href'),
// --- узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
// --- анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({scrollTop: top}, 1500);
});
});
</sсript>
Если не будет получается, скачай архив.
В нём рабочий пример...)
-MiSHuTkA- 10 Ноября 2021
Автор темы
DoR,
После формы отправки вставил и после отправки позицию скрола-полоса прокрутки возвращается в то положение где была отправка -удобно -не нада листать страничку чтоб увидеть написаное и время экономится -если посчитать сэкономленое время на прокрутку сколько тратися то выйдет много а этот скрипт избавит от лишний траты времени !
Решено вот!
echo "</form>n";// это где оканчивается форма
та позиции ее не вписуйте
после формы это ставите
////////// СКРОЛИНГ
?>
<sсript>
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}});
</sсript>
<?
?>
<?
У меня идея еще была но незнаю как правильней -по якорю можно сделать еще
там проще -может подскажеш как в отправке форме вернуть на положение кнопки отправить
такой смысл -тоже реально но тестировал по свойму разное и недоделал -по разному можно а как лучше тож не знаю -все сырое
______________________
-MiSHuTkA-
Автор темы
DoR,
После формы отправки вставил и после отправки позицию скрола-полоса прокрутки возвращается в то положение где была отправка -удобно -не нада листать страничку чтоб увидеть написаное и время экономится -если посчитать сэкономленое время на прокрутку сколько тратися то выйдет много а этот скрипт избавит от лишний траты времени !
Решено вот!
echo "</form>n";// это где оканчивается форма
та позиции ее не вписуйте
после формы это ставите
////////// СКРОЛИНГ
?>
<sсript>
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}});
</sсript>
<?
?>
<?
У меня идея еще была но незнаю как правильней -по якорю можно сделать еще
там проще -может подскажеш как в отправке форме вернуть на положение кнопки отправить
такой смысл -тоже реально но тестировал по свойму разное и недоделал -по разному можно а как лучше тож не знаю -все сырое
______________________
-MiSHuTkA-
-MiSHuTkA- 10 Ноября 2021
Автор темы
DoR, да работает твой скрипт!
Спасибо !
вставил просто так послле </textarea><br />';и все !
echo '<textarea id="message"name="msg">'.$respons_msg.'</textarea><br />';
}
echo '<br />';
//////////// СКРОЛИНГ
?>
<sсript>
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
// --- Сначала проверяем на заполненность локальной сессии и если она не пустая выводим.
$(window).scrollTop(sessionStorage.scrollTop);
}
$(window).scroll(function() {
// --- А уже потом перехватываем событие жеста и пишем в локальную сессию.
sessionStorage.scrollTop = $(this).scrollTop();
});
});
</sсript>
<?
?>
<?
//////////////////
Удобно стало! Не нада после написания сообщения листать вниз страничку чтоб увидеть написаное я думаю это многим пригодится - как идея? Такого нет всетаки в соц сетях -может разработчики DCMS это внедрят себе в модуль глобально -а почему и нет? Пишеш к примеру сообщение и после отправки возвращаешся в ту позмцию полосы прокрутки-скрола !
______________________
-MiSHuTkA-
Автор темы
DoR, да работает твой скрипт!
Спасибо !
вставил просто так послле </textarea><br />';и все !
echo '<textarea id="message"name="msg">'.$respons_msg.'</textarea><br />';
}
echo '<br />';
//////////// СКРОЛИНГ
?>
<sсript>
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
// --- Сначала проверяем на заполненность локальной сессии и если она не пустая выводим.
$(window).scrollTop(sessionStorage.scrollTop);
}
$(window).scroll(function() {
// --- А уже потом перехватываем событие жеста и пишем в локальную сессию.
sessionStorage.scrollTop = $(this).scrollTop();
});
});
</sсript>
<?
?>
<?
//////////////////
Удобно стало! Не нада после написания сообщения листать вниз страничку чтоб увидеть написаное я думаю это многим пригодится - как идея? Такого нет всетаки в соц сетях -может разработчики DCMS это внедрят себе в модуль глобально -а почему и нет? Пишеш к примеру сообщение и после отправки возвращаешся в ту позмцию полосы прокрутки-скрола !
______________________
-MiSHuTkA-
DoR 9 Ноября 2021
-MiSHuTkA-, Привет, смотри...
--- При условии если scrollTop не пустая, то выбираешь значение и локальной сессии.
Что получается... При обновлении странички сначала запись обновляется ( то есть, если старая запись есть, то она заменяется новой ) и только после это срабатывает вывод.
Потому что $(document).ready(function() ждёт пока загрузиться ДОМ, то есть $(window).scroll(function() срабатывает быстрее.
--- Попробуй так:
<sсript type="text/javasсript">
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
// --- Сначала проверяем на заполненность локальной сессии и если она не пустая выводим.
$(window).scrollTop(sessionStorage.scrollTop);
}
$(window).scroll(function() {
// --- А уже потом перехватываем событие жеста и пишем в локальную сессию.
sessionStorage.scrollTop = $(this).scrollTop();
});
});
</sсript>
Извини если очень плохо пояснил...
Какой день, так и поясняю...))
-MiSHuTkA-, Привет, смотри...
--- При условии если scrollTop не пустая, то выбираешь значение и локальной сессии.
Что получается... При обновлении странички сначала запись обновляется ( то есть, если старая запись есть, то она заменяется новой ) и только после это срабатывает вывод.
Потому что $(document).ready(function() ждёт пока загрузиться ДОМ, то есть $(window).scroll(function() срабатывает быстрее.
--- Попробуй так:
<sсript type="text/javasсript">
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
// --- Сначала проверяем на заполненность локальной сессии и если она не пустая выводим.
$(window).scrollTop(sessionStorage.scrollTop);
}
$(window).scroll(function() {
// --- А уже потом перехватываем событие жеста и пишем в локальную сессию.
sessionStorage.scrollTop = $(this).scrollTop();
});
});
</sсript>
Извини если очень плохо пояснил...
Какой день, так и поясняю...))
-MiSHuTkA- 9 Ноября 2021
Автор темы
при переходе на на страницу с где этот код выдает прежнее положение страницы
______________________
-MiSHuTkA-
Автор темы
Энмеркар (9 Ноября 2021):
-MiSHuTkA-, Если ты имеешь виду полосы прокрутки,, то проще некуда вот код
<sсript type="text/javasсript">
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
</sсript>
Страничка сайта фиксируется на том месте где человек обновил или же отправил сообщение
Энмеркар, но есть одно но -MiSHuTkA-, Если ты имеешь виду полосы прокрутки,, то проще некуда вот код
<sсript type="text/javasсript">
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
</sсript>
Страничка сайта фиксируется на том месте где человек обновил или же отправил сообщение
при переходе на на страницу с где этот код выдает прежнее положение страницы
______________________
-MiSHuTkA-
-MiSHuTkA- 9 Ноября 2021
Автор темы
Энмеркар, спасибо за код
задачу решил
вобщем твой код нада вставить после формы а в форме отправки перед Отправкой вписать этот код
?><input type="hidden" name="scroll" value="">
<?
Вот что получилось
<?
//////
echo "<form method="post" name='message' action="room.php?$passgen&".$go_otv."">";
echo '<textarea id="message"name="msg">'.$respons_msg.'</textarea><br />';
}
echo '<br />';
echo '<input value="Отправить" type="submit" /> <a style = "padding: 5px; border: 1px solid silver;" href="?retr">ќбновить</a><br /><br />';
?>
<input type="hidden" name="scroll">
<?
echo "</form>";
?>
<sсript>
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}});
</sсript>
<?
///////
?>
______________________
-MiSHuTkA-
Автор темы
Энмеркар, спасибо за код
задачу решил
вобщем твой код нада вставить после формы а в форме отправки перед Отправкой вписать этот код
?><input type="hidden" name="scroll" value="">
<?
Вот что получилось
<?
//////
echo "<form method="post" name='message' action="room.php?$passgen&".$go_otv."">";
echo '<textarea id="message"name="msg">'.$respons_msg.'</textarea><br />';
}
echo '<br />';
echo '<input value="Отправить" type="submit" /> <a style = "padding: 5px; border: 1px solid silver;" href="?retr">ќбновить</a><br /><br />';
?>
<input type="hidden" name="scroll">
<?
echo "</form>";
?>
<sсript>
$(window).scroll(function() {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function() {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}});
</sсript>
<?
///////
?>
______________________
-MiSHuTkA-
-MiSHuTkA- 9 Ноября 2021
Автор темы
Энмеркар, да твой скрипт работает-при обновлении сохраняет позицию скролинга
мне нада не чтоб при нажатии отправить сообщение сохранялась позиция скрола
а этот скрипт твой неподошел или я его неправильно поставил как сделать чтоб при нажатии на Отправить а это уже форма сохранялась позиция скрола вот что нада щас тестирую разное но пока не нашел подходящего - есть идея по якорю сделать чтоб после отправки перебрасовало в конец формы после самой формы но это тест покамись - вобщем будет так написал сообщение и увидел его после отправки -или скролом или якорем нада реализовать
______________________
-MiSHuTkA-
Автор темы
Энмеркар, да твой скрипт работает-при обновлении сохраняет позицию скролинга
мне нада не чтоб при нажатии отправить сообщение сохранялась позиция скрола
а этот скрипт твой неподошел или я его неправильно поставил как сделать чтоб при нажатии на Отправить а это уже форма сохранялась позиция скрола вот что нада щас тестирую разное но пока не нашел подходящего - есть идея по якорю сделать чтоб после отправки перебрасовало в конец формы после самой формы но это тест покамись - вобщем будет так написал сообщение и увидел его после отправки -или скролом или якорем нада реализовать
______________________
-MiSHuTkA-