允许滚动超出页面底部

Question

我正在为这样的标题使用 ids 链接

<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，但请注意它不会将“数据”标题放在浏览器窗口的顶部。

Answer 1

我的谦虚建议是通过点击使用部分突出显示。

通过单击链接获取部分 id 并用某个类突出显示它。

使用过渡使其更平滑。

$('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>