Question

我将id链接用于此类标题

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

并具有如下链接，可将滚动条向下跳转到它们：

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

问题（在我看来）是，当页面短于浏览器窗口的高度，或者标题接近页面底部时，跳转链接将无效，因为浏览器没有可用的滚动。 / p>

我希望滚动条可以正常工作，只是将页脚颜色根据需要向下扩展。

我唯一想到的方法是在页脚上放一个巨大的padding-bottom: 200em;，但是很容易滚动到虚无状态，我不得不猜测用户的屏幕有多高。

有更好的方法吗？

这是我正在处理的事情http://demo.schemaexplorer.io/tables/Genre?GenreId=2&_rowLimit=100#data-注意url末尾的#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>

允许滚动到页面底部

1 个答案: