Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/13: Рейтинг темы: голосов - 13, средняя оценка - 4.85
31 / 45 / 21
Регистрация: 09.10.2012
Сообщений: 825

Скролл до элемента

12.07.2017, 14:04. Показов 2740. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток! Ребята, имеется вот такой КОД.
HTML5
1
2
3
4
5
<form>
  <input class="place_for_search" type="text" id="text-to-find" value="" placeholder="Search" autofocus>
  <input class="button_for_turn_back" type="button" onclick="javascript: FindOnPage('text-to-find',false); return false;" value=" " title="Отменить поиск">
  <input class="button_for_search" type="submit" onclick="javascript: FindOnPage('text-to-find',true); return false;" value=" " title="Начать поиск">
</form>
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
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
var input, search, pr, result, result_arr, locale_HTML, result_store;
 
function func() {
  locale_HTML = document.body.innerHTML; // сохраняем в переменную весь body (Первоначальный)
}
setTimeout(func, 1000); //ждем подгрузки Jsona и выполняем
 
function FindOnPage(name, status) {
 
  input = document.getElementById(name).value; //получаем значение из поля в html
 
  if (input.length < 3 && status == true) {
    alert('Для поиска вы должны ввести три или более символов');
 
    function FindOnPageBack() {
      document.body.innerHTML = locale_HTML;
    }
  }
 
  if (input.length >= 3) {
    function FindOnPageGo() {
 
      search = '/' + input + '/g'; //делаем из строки регуярное выражение
      pr = document.body.innerHTML; // сохраняем в переменную весь body
      result = pr.match(/>(.*?)</g); //отсекаем все теги и получаем только текст
      result_arr = []; //в этом массиве будем хранить результат работы (подсветку)
 
      var warning = true;
      for (var i = 0; i < result.length; i++) {
        if (result[i].match(eval(search)) != null) {
          warning = false;
        }
      }
      if (warning == true) {
        alert('Не найдено ни одного совпадения');
      }
 
      for (var i = 0; i < result.length; i++) {
        result_arr[i] = result[i].replace(eval(search), '<span style="background-color:yellow;">' + input + '</span>'); //находим нужные элементы, задаем стиль и сохраняем в новый массив
      }
      for (var i = 0; i < result.length; i++) {
        pr = pr.replace(result[i], result_arr[i]) //заменяем в переменной с html текст на новый из новогом ассива
      }
      document.body.innerHTML = pr; //заменяем html код
    }
  }
 
  function FindOnPageBack() {
    document.body.innerHTML = locale_HTML;
  }
  if (status) {
    FindOnPageBack();
    FindOnPageGo();
  } //чистим прошлое и Выделяем найденное
  if (!status) {
    FindOnPageBack();
  } //Снимаем выделение
}
Грубо говоря аналог CTRL + F для поиска по сайту. Вопрос состоит в том, как сделать скролл до найденного элемента?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
12.07.2017, 14:04
Ответы с готовыми решениями:

Прокрутить скролл до элемента
Здравствуйте. Задача: прокрутить скролл до конца или до определенного элемента. Есть див с y-скроллом .messages &lt;div...

Скролл фиксированного элемента
не могу понять как тут https://coffeeok.com.ua/kofe-v-zernah реализован скролл фильтра, он и скролится и фиксится когда доходит до верха...

Скролл элемента .scroll() + событие
Добрый день уважаемые. Подскажите пожалуйста как реализовать такую штуку - Есть в хедере менюшка с навигацией, когда пользователь...

1
12 / 12 / 6
Регистрация: 15.08.2011
Сообщений: 184
18.07.2017, 07:31
window.scrollTo(X, Y)
где X и Y - координаты необходимого элемента (left, top)
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
18.07.2017, 07:31
Помогаю со студенческими работами здесь

Scroll-bar у div'элемента, как повесить функцию на событие скролл ВВЕРХ?
JavaScript!? (Jquery) возможно ли повесить функцию на событие клика по скроллбару в диве, если да, то как? (скролл-бар у...

Как сделать чтобы при открытии файла в VS, скролл элемента "panel" находился в определённом положении?
Как сделать чтобы при открытии файла в Visual Studio для работы с кодом и &quot;Windows Forms&quot; скрол элемента &quot;panel&quot; &quot;Windows...

Скролл
как сделать следящие - если есть скролл то этому блоку применять CSS(background:red) Пытался проверить на наличие скролла вот так ...

Скролл
Вообщем есть 2 дива которые находятся в родителе див. В первом диве есть &lt;textarea&gt;, требуется чтобы скрол после обновления...

скролл
Есть несколько блоков &lt;div id=&quot;block1&quot; style=&quot;height: 500px;&quot;&gt;&lt;/div&gt; &lt;div id=&quot;block2&quot; style=&quot;height: 500px;&quot;&gt;&lt;/div&gt; &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru