Question

很抱歉这个长标题，但我想构建一个非常小的页面，用户可以点击标签，实际内容应该显示在一个网站上。

例如，您在页面顶部有一个菜单，当用户单击菜单中的链接时，应显示“页面”。但是，不是每次都重新加载新页面，所有页面都应该放在彼此之上，点击链接应该只是滚动到正确的位置。类似地，如果用户滚动，他看到的页面的链接应该被标记为活动。

这些页面叫什么？我是否需要jQuery，或者我可以使用纯bootstrap吗？

Answer 1

你只需要bootstrap Scrollspy。

Scrollspy ：根据滚动位置自动更新Bootstrap导航或列出组组件，以指示视口中当前处于活动状态的链接。

Answer 2

你的问题的答案：

如果在一个站点上有多个页面并且单击链接的页面向下滚动，页面如何被调用？

是：

这些通常被称为“单页网站”（您正在处理网站）或“单页应用程序”也缩写为SPA（您在哪里）正在处理某种Web应用程序）。

Scrollspy只是一个导航/ JavaScript组件，用于创建某些滚动效果的网站类型。

要实现您描述的滚动效果，您可以使用以下jQuery代码段（根据需要调整速度）：

  //Use smooth scrolling when clicking on navigation
  $('.navbar a').click(function() {
    if (location.pathname.replace(/^\//,'') ===
      this.pathname.replace(/^\//,'') &&
      location.hostname === this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-topoffset+2
        }, 500); // 500 means 500ms or half a second i.e. time it takes to reach the target
        return false;
      } //target.length
    } //click function
  }); //smooth scrolling

页面如何在一个站点上有多个页面并且单击链接向下滚动？

2 个答案: