将 HTML 页面滚动到响应式页面中给定锚点的最佳方式答案

【问题标题】：Best way to scroll HTML page to given anchor in a responsive page将 HTML 页面滚动到响应式页面中给定锚点的最佳方式
【发布时间】：2017-02-12 20:21:15
【问题描述】：

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

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

我希望这些块在同一页面上有一个锚点：当你点击它时，它会向你显示内容（不会重定向到不同的页面）

实现这一目标的最佳“现代”方式是什么？普通锚链接/jquery/css 其他？

你能举个例子吗？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

根据我的说法，最好的方法是将目标内容放在同一页面上，ID 为（显然是唯一的）<div id="generic"> ..content.. </div> 和您的<a> 标签的href，定位所需的div，ID 为@987654325 @。像这样

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

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

要不将#generic 添加到您的网址，请尝试在上述代码之外使用超级简单的 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.
});

我已在您的网站上对此进行了测试，效果非常棒！如果有任何问题，请告诉我。

【讨论】：

在我看来，基本的锚链接（href to id）没有滚动到精确的位置。而且我很确定这在移动响应中效果不佳。
实际上确实如此 :-) 你可以看看我自己网站的菜单，了解它是如何工作的here
如何隐藏url中的#part？当我点击链接上的导航栏时，它没有添加#，该怎么做？
我已经为此部分编写了几行 JQuery 行。我已经更新了我的答案。看看吧
如果您的 id 是唯一的，您肯定不会将其命名为 generic 吗？ :-D

【解决方案2】：

Google...单页应用程序（SPA）我知道可以使用 AngularJS 等，但我可能有一些解决方案可以仅使用 Jquery/Javascript 来实现这一点

看看Architecture for single page application (JavaScript)

也可以看看http://singlepageappbook.com/single-page.html

【讨论】：

【解决方案3】：

这样做有很多可能性，最简单和最愚蠢的方法是像这样创建和锚定链接：

<a href="#myContainerId">To my container</a>

其中的 href 是您希望通过点击到达的容器的 id。当然，这种方法在没有任何动画的情况下跳转。在这里可以找到一个很好的带有锚的动画滚动示例：

CSS tricks smooth scroll

如果有帮助，请告诉我。

干杯

【讨论】：