Определить ключ в ссылке

241
31 января 2018, 13:20

Задача такая: есть форма поиска (поиск обычный, без ajax), и после перезагрузки страницы необходимо пользователя отправить к нужному блоку (скролл до определённого места страницы, а именно к форме поиска, прокрутив ниже, оставив позади шапку с меню).

Второй вариант: найти определённый ключ в ссылке и если он есть выполнить скролл до блока с нужным id.

Ссылка имеет вид _https://domen/razdel/?query=search_key
Собственно зоной интереса является ?query, т.к. всё остальное может меняться. Нашёл свойства window.location.search, это при помощи него надо реализовывать? бы бы благодарен правильному решению.

Если описать функцию целиком, то так: если страница меньше 1000 px в ширину (определить при загрузке) -> если в ссылке содержится ?query -> выполнить скролл до объекта с id="main" с отступом сверху от него на 50px.

И главное, чтобы это можно было реализовать на чистом js, т.к. jquery я подключаю в конце страницы.

Answer 1

К сожалению в сниппете не работает, видимо скрипт снипета выполняется в SandBox, на реальном файле, работает.

Когда будете тестировать на реальном файле, просто добавьте после открытия в конец например ?query=2, на файл это не повлияет, но позволит скрипту сработать.

Почему сделан setTimeout смотрим в уточняющих комментариях.

function tryScroll() { 
  if (window.location.search.indexOf("?query") >= 0 && document.body.clientWidth < 1000) { 
    var el = document.getElementById("main"); 
    window.scroll(0, findScrollPosition(el) + 50); 
  } 
} 
 
function findScrollPosition(obj) { 
  var curtop = 0; 
  if (obj.offsetParent) { 
    do { 
      curtop += obj.offsetTop; 
    } while (obj = obj.offsetParent); 
    return curtop; 
  } 
} 
 
window.onload = function() { 
  window.setTimeout(tryScroll, 0); 
};
.start { 
  background-color: pink; 
  height: 500px; 
} 
 
#main { 
  background-color: green; 
} 
 
.end { 
  background-color: yellow; 
  height: 100px; 
}
<div class="start"> 
  start 
</div> 
 
<div id="main"> 
  main 
</div> 
 
<div class="end"> 
  end 
</div>

READ ALSO
Как передать значение value из input1 в value input2
HTML

Как передать значение value из input1 в value input2

Есть несколько инпутов с предустановленными значениями(берутся из БД):

 266
PHPMailer: Как в тело письма встроить Youtube видео?
HTML

PHPMailer: Как в тело письма встроить Youtube видео?

Нужно, чтобы человек открыл письмо и в нём посмотрел Youtube видеоHTML-код для встраивания видео от Youtube в теле письма не работает

 268
Youtube iframe не загружается
HTML

Youtube iframe не загружается

Есть javascript код:

 285
Select с множественным выбором
HTML

Select с множественным выбором

Нужно написать выпадающий список, так чтобы пользователь мог отметить несколько значений

 289