Разрешить прокрутку за пределы нижней части страницы - PullRequest
Новая
       54

Разрешить прокрутку за пределы нижней части страницы

0 голосов
/ 23 октября 2018

Я использую ссылки идентификаторов для таких заголовков, как этот 

<h2 id="section-name">section x</h2>

, и у меня есть ссылки, которые перемещаются вниз по прокрутке, например: 

<a href=#section-name>section x</a>

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

Мне бы хотелосьпрокрутите, чтобы работать, и просто увеличьте цвет нижнего колонтитула по мере необходимости.

Единственный способ, которым я могу придумать, это сделать массивный padding-bottom: 200em; в нижнем колонтитуле, но тогда легко прокрутитьв небытие, и я должен догадаться, какой высоты экран у пользователя.

Есть ли лучший способ?

Вот над чем я работаю http://demo.schemaexplorer.io/tables/Genre?GenreId=2&_rowLimit=100#data- обратите внимание на #data в конце URL, но обратите внимание, что он не помещает заголовок «данные» в верхней части окна браузера.

1 Ответ

0 голосов
/ 23 октября 2018

Мой скромный совет - использовать подсветку разделов по клику.

Нажав на ссылку, вы получите идентификатор раздела и выделите его некоторым классом.

Используйте переходы, чтобы сделать его более плавным.

$('a').click(function() { 
	
  var currentSection = $(this).attr('href');
  $(currentSection).addClass('highlighted');

  setTimeout(function() {
      $(currentSection).removeClass('highlighted');
  }, 2000);
  
});
div {
  height: 200px;
  transition: background-color 1000ms linear;
}

.highlighted {
  background-color: rgba(0,0,0,0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#section1">Section 1</a>

<a href="#section2">Section 2</a>

<div>
some text
</div>
<div id="section1">
section1
</div>

<div id="section2">
section2
</div>
...