Как сделать, чтобы при появлении всплывающего окна страница скролилась к якорю?
Здравствуйте. Помогите, пожалуйста решить вопрос, как сделать так, чтобы страница скролилась к якорю не сразу после клика по ссылке, а только после появления всплывающего окна, которое появляется только если юзер заполнил необходимое поле.
Код:
<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>Код:
"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;
}Код:
#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;
}