Как сделать, чтобы при появлении всплывающего окна страница скролилась к якорю?

@Siurendy · Регистрация: 07.06.2016

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

Здравствуйте. Помогите, пожалуйста решить вопрос, как сделать так, чтобы страница скролилась к якорю не сразу после клика по ссылке, а только после появления всплывающего окна, которое появляется только если юзер заполнил необходимое поле.

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <input id="inp" class="name" autocomplete="name" name="name" placeholder="Ваше имя" required />
 
 
    <a href="#scroll"><button id="openwindow">Отправить</button></a>
 
    <div id="window9">  
        <p>Содержимое окна</p>
        <button onclick="show('none')" id="closewindow9">X</button>
    </div>
        
<div id="scroll"></div>

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
        "use strict";
 
        let inp = document.getElementById("inp");
 
        inp.addEventListener("mousedown", () => {
            inp.classList.remove("isNotValid");
        });
        
        inp.addEventListener("blur", valid.bind(null, inp));
 
        document.getElementById("openwindow").addEventListener("click", () => {
            if (!valid(inp)) return false;
            show("block");
 
        });
 
        function valid(inp) {
            if (!inp.value) {
                inp.classList.add("isNotValid");
                return false;
            }
            return true;
        }
 
        function show(state) {
          // if (state === "block") {
          //   timer = window.setTimeout(move, 0);
          // } else {
          //   clearTimeout(timer);
          // }
          document.getElementById('window9').style.display = state;
          // document.getElementById('wrap9').style.display = state;
          
        }

CSS
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
                #wrap9 {
                    display: none;
                    opacity: 0.5;
                    position: fixed;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-color: rgba(255, 255, 255, 1);
                    z-index: 100;
                    overflow: auto;
                }
                
                #window9 {
                    width: 500px;
                    height: 300px;
                    margin: auto;
                    display: none;
                    background: #fff;
                    border: 1px solid #365E97;
                    z-index: 200;
                    position: fixed;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    padding: 15px 30px 30px 30px;
                    vertical-align:middle;
                    -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
                    box-shadow:0 5px 15px rgba(0,0,0,.5);
                }
         
         
                #closewindow9 {
                    background-color: red;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                
                .name {
                     border: 1px solid #eeeeee;
                }
 
                .isNotValid {
                    background-color: red;
                }
                
#scroll {
background-color: #dddddd;
padding: 300px 100px 300px 100px;
margin-top: 600px;
}

@___Dima___ · 19.04.2020, 01:38

HTML5
1
2
3
4
5
<div class="menu">
    <textarea id="area" class="input" cols="30" placeholder="write something here" rows="4"></textarea>
    <div id="scroll" onclick="ScrollToEnd()">v</div>
</div>
<div class="testFunction"></div> <!--чтобы сделать скролл для примера-->

CSS
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
body
  {
    overflow-x: hidden;
    background-color: rgb(240, 240, 240);
  }
.input
  {
    position: absolute;
    resize: none;
    outline: none;
    background-color: rgb(12,12,21);
    color: rgb(113, 113, 114);
    border-radius: 7px;
    padding-left: 5px;
    z-index: 1;
  }
.menu
  {
    position: relative;
    top: 100px;
    left: 100px;
  }
#scroll
  {
    position: absolute;
    border-radius: 50%;
    background-color: rgb(121, 121, 121);
    z-index: 0;
    height: 30px;
    width: 30px;
    top: 15px;
    left:200px;
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16pt;
    cursor: pointer;
  }
.scroll_active
  {
    transform: translateX(130%);
  }
.testFunction
  {
    height: 110%;
    width: 20px;
    background-color: rgb(165, 165, 165);
  }

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
setInterval("CheckForText()", 100);
 
    function CheckForText()
    {
        
      var text=document.getElementById("area").value
      if(text!="")
          {
            scrollActive=1;
            ScrollTest();
          }
            else
                {
                  if(text=="")
                    {
                      scrollActive=0;
                      ScrollTest();
                    }
                 }
    }
 
 var scrollOn=0   
  function ScrollTest()
    {
      if(scrollActive==1 && scrollOn==0)
        {
          scrollOn=1;
          $("#scroll").toggleClass("scroll_active");
          
        }        
        else
            {
              if (scrollActive == 0 && scrollOn==1)
                {
                  scrollOn=0;
                  $("#scroll").toggleClass("scroll_active");
                  
                }   
            }
    }       
 
  function ScrollToEnd()
    {
      var MaxScroll=document.documentElement.scrollHeight; 
      window.scrollTo(0,MaxScroll);
    }

Доброй ночи , вот ваше решение. С данными для формы можно поиграться(отслеживать в
ввод правильной инфы). если есть что-то в textarea справа выезжает кнопка,
если textarea пустая кнопки нет. Удачи

Новые блоги и статьи Все статьи Все блоги /
1С: Программный отбор элементов справочника Номенклатура по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника Сотрудники по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .