Прокрутка до якоря на маленьких экранах

175

18 апреля 2018, 04:34

Добрый день коллеги. Есть сайт на bootstrap, он отлично сжимается на мобилке/планшете/нетбуке, без косяков. Цель: только на маленьких экранах, нетбук, телефон, планшет, скажем перехожу я с "главной" на "прайс", нужно промотать страницу после загрузки мгновенно, а лучше плавно (есть куча всяких готовых скриптов в поиске, я уж не стал скидывать, т.к. он может не подойти для моей цели), к якорю например, в моем случае хорошо будет к H1. Дело в шапке, на экране телефона только она и входит, лучше бы сразу проматать пользователям, к тому куда они шли. Вот не знаю как реализовать сею штуку. Всё дело из-за того что это нужно только на маленьких мониторах.

Answer 1

Поиск элемента по id, дальше плавный скролл к нему, код выглядит примерно так:

function scroll_to_elem(elem) { 
  if(document.getElementById(elem)) { 
    var destination = $('#'+elem).offset().top; 
    var scrollTime=destination/1.73; 
    $("body,html").animate({"scrollTop":destination},scrollTime); 
  } 
}

<h1 id='h1'>Заголовок</h1>

Один минус, не уверен я, что на маленьких экранах анимацию не отключат. Во всяком случае, я обычно отключаю.

P. S. Да, вызывать функцию, например, так: scroll_to_elem(h1); где h1 - это id элемента, а не тег.

Answer 2

Вот например на jQuery можно переделать, что бы после загрузки, если экран меньше n пикселей(а как правильно по ширине или высоте?), то срабатывал скрипт. Можно помещать в тело страниц, лучше наверно в файл js, а в теле запускать как раз window.onload = наш скрипт, наверно так =)

$(document).ready(function() { 
$("a.scrollto").click(function () { 
var elementClick = $(this).attr("href") 
var destination = $(elementClick).offset().top; 
jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 800); 
return false; 
}); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1 id="m1">Текст</h1> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
<p>текст</p> 
 
 
<a href="#m1" class="scrollto">ВВЕРХ</a>