如何在页面的一侧有锚点？ [关闭]答案

【问题标题】：How to have anchors to the side of the page? [closed]如何在页面的一侧有锚点？ [关闭]
【发布时间】：2016-07-18 17:52:55
【问题描述】：

http://www.cincinnatiburgerweek.com/

http://www.cincinnatiburgerweek.com/#!drakes/oot2t

基于这 2 个链接，您如何拥有您的主页，然后当您点击一家餐厅时，它不是一个单独的 URL？而是转到主页右侧的锚链接。这怎么可能使用 css 使主页适合浏览器的宽度，并且此锚位置位于右侧？

【问题讨论】：

大量的 JavaScript
我不明白为什么它被否决或投票结束，因为这不是一个重复或无效的问题吗？
收盘的评论是“太宽泛”

标签： html css

【解决方案1】：

您正在寻找Single Page Applications (SPA)。

页面在过程中的任何时候都不会重新加载，也不会控制转移到另一个页面，尽管位置散列可用于提供不同逻辑页面的感知和导航能力应用程序，HTML5 pushState() API 也是如此。

要回答你的问题，基本上，步骤是：

防止页面重定向。
更新浏览器状态（模拟新页面）。
动态加载相关内容。

从表面上看，应该是这样的：

var linkAbout = document.querySelector('a[href="/about"]');

linkAbout.addEventListener('click', function (e) {
  // Prevent page redirect.
  e.preventDefault();
  // Update browser state.
  var stateObj = { foo: "bar" };
  history.pushState(stateObj, 'About page', '/about');
  // Dynamically load the related content. 
  // Here you will need to send some asynchronous (ajax) request 
  // to the server, get the content and put it on the current page.
  var container = document.querySelector('#container');
  var content = getContent('/about');
  container.innerHTML = content;
});

显然这是一个总结，关于这种方法还有很多地方没有在这里提到。

您可以找到许多有助于使用这种现代方法构建 Web 应用程序的库和框架。

【讨论】：

如果我想试试这个，比如说我需要使用 PHP 还是只使用 HTML 作为基本构建块？是否有您特别喜欢的 HTML 或 PHP 框架/库来帮助您做到这一点？
视情况而定，如果您的网站应该是动态的，您需要将服务器端 (php) 与前端集成。最著名的框架是 AngularJS，但我建议您寻找最适合您项目的框架。见stackoverflow.com/questions/14336450/… 和noeticforce.com/…

【解决方案2】：

基本上，他们使用 JavaScript 来...

捕获事件 [点击、触摸等]
使用该#id 选择器定位元素（在这种情况下保存在数据属性中，而不是将#id 放在href 中）
平滑过渡到页面上的该位置（具有该#id 选择器的元素）

一个更简单的例子……

https://css-tricks.com/snippets/jquery/smooth-scrolling/

关于页面上的定位，他们只是使用fixed 定位，它将元素从正常的文档流中移除并相对于窗口（视口）定位它。他们正在使用一个方便的小技巧将其垂直居中一些调用absolute centering。

【讨论】：

为什么投反对票？请详细说明？
肯尼斯，我明白你关于平滑滚动的观点。我也很好奇，并想尝试演示他们如何将其放置在主页的一侧。想法？
更新了答案，但简单来说，他们使用的是固定定位。