html - 将 HTML 页面滚动到响应页面中给定 anchor 的最佳方式

Question

我已经基于这个响应式模板创建了一个页面

https://html5up.net/uploads/demos/phantom/

我希望这些 block 在同一页面上有一个 anchor :当您单击它时，它会向您显示内容(不会重定向到不同的页面)

实现此目标的最佳“现代”方法是什么？普通 anchor 链接/jquery/css 其他？

你能举个例子吗？

谢谢

Answer 1

根据我的说法，最好的方法是将目标内容放在具有 ID(显然是唯一的)的同一页面上 <div id="generic"> ..content.. </div>在你的 <a> 上标签的 href , 使用 ID 为 href="#generic" 的目标 div .像这样

<a href="#generic">
  <h2>Magna</h2>
  <div class="content">
     <p>Sed nisl arcu euismod sit ame.</p>
  </div>
</a>
.....
.....
.....
<div id="generic">..</div>

除此之外，还添加了平滑滚动，使其看起来像是向上/向下滑动到目标内容。

不添加 #generic到您的 url 尝试使用除上述代码之外的 super 简单的 JQuery 修复:

$("article a").click(function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500);
    e.preventDefault(); //this is the important line.
});

我已经在您的网站上测试过它，效果非常好!如果有任何问题，请告诉我。