当您在一个站点上有多个页面并且单击链接只是向下滚动时，如何调用页面？

Posted 2023-05-08

【中文标题】当您在一个站点上有多个页面并且单击链接只是向下滚动时，如何调用页面？

【英文标题】：How are pages called where you have multiple pages on one site and clicking links just scrolls down?

【发布时间】：2018-07-03 23:32:39

【问题描述】：

抱歉，标题太长了，但我想构建一个非常小的页面，用户可以在其中单击选项卡，并且实际内容应显示在一个站点上。

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

这些页面叫什么？我需要 jQuery 还是可以使用纯引导程序来做到这一点？

【问题讨论】：

我认为您是在谈论着陆页...您的意思是一个单页站点，带有一个导航栏，当您单击链接时，它会转到页面的某个部分？

对，实际html页面中的每个“页面”都应该以完整的浏览器高度显示。

我不确定您所要求的内容实际上是否有正式名称，但可以通过使导航按钮的超链接指向您想要的元素的 id 来实现基本功能例如，滚动到<a href="#contentB">navButtonB</a>。

【参考方案1】：

您只需要引导 Scrollspy。

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

【参考方案2】：

你的问题的答案：

如果您在一个站点上有多个页面并且点击链接只是向下滚动，那么页面如何调用？

是：

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

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

要实现你描述的滚动效果，可以使用下面的jQuery sn -p（根据需要调整速度）：

  //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