我已经基于这个响应式模板创建了一个页面
https://html5up.net/uploads/demos/phantom/
我希望这些 block 在同一页面上有一个 anchor :当您单击它时,它会向您显示内容(不会重定向到不同的页面)
实现此目标的最佳“现代”方法是什么?普通 anchor 链接/jquery/css 其他?
你能举个例子吗?
谢谢
最佳答案
根据我的说法,最好的方法是将目标内容放在具有 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.
});
我已经在您的网站上测试过它,效果非常好!如果有任何问题,请告诉我。
关于html - 将 HTML 页面滚动到响应页面中给定 anchor 的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39856170/