Question

http://www.cincinnatiburgerweek.com/

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

根据这2个链接，您如何拥有主页，然后当您点击餐馆时，它不是一个单独的URL？而是转到主页右侧的锚链接。如何使用css使主页面适合浏览器的宽度，并将此锚点位置移到右侧？

Answer 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应用程序的库和框架。

Answer 2

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

捕捉事件[点击，触摸等]
找到具有该#id选择器的元素（在这种情况下保存在数据属性中，与仅将#id放在href中相比）
平滑过渡到页面上的该位置（具有该#id选择器的元素）

一个更简单的例子......

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

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

如何将锚点放在页面的一侧？

2 个答案: