Google AMP Navigation · One page Scrolling Navigation

Documentation and examples for a pure css scrolling navigation: Google AMP Navigation · One page Scrolling Navigation.

Google AMP One Page Scrolling

Scrolling Nav is a navigation for creating smooth scrolling, one page websites.

  • Clickable nav links that smooth scroll to page sections
  • Responsive behavior when clicking nav links perfect for a one page website

One page scroll navigation is a normal navigation except the nav item switches on scrolling not only clicking. We will add option to click to a link too and also slow switch to look nicer. It is what commonly used in actual websites rather than quick jump sections on navigation menu.

The purpose of adding “scrolling” navigation is to quickly jump to different sections of your page. So first, we have to add content so that our page is long enough to scroll to different sections.

We can add whatever content you’d like, but the important thing is for each section to have a unique ID that will serve as the “anchor” for the anchor links in our navigation, and for the sections to be vertically long enough that we can scroll in between them.

Required scripts

<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Search and replace ...

<input type="checkbox" id="mobile">

with this

<input on="change:AMP.setState({mobileMenu:{chkMobile : "main-menu"}})" [checked]="mobileMenu.chkMobile == "main-menu" ? checked : "" " type="checkbox" id="mobile">
Notice: This is used for mobile viewports so that the menu is closed again when you click on a link.
<header class="mega-menu">
  <div class="container">
    <div class="row">
      <div class="header">
        <div class="container">
          <nav class="main-menu" id="main-menu">
            <!-- Mobile Menu -->
            <label for="mobile" id="mobile-menu">
              <a href="#" title="Google AMP Navigation · One page scrolling nav">
                <amp-img
                  alt="Google AMP Navigation · One page scrolling nav"
                  title="Google AMP Navigation · One page scrolling nav"
                  src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                  width="21"
                  height="24"
                  class="img-logo">
                </amp-img>
                <span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
              </a>
          
              <span class="main-menu-dropdown-icon">
                <i class="hamburger"></i>
              </span>
            </label>
        
            <input on="change:AMP.setState({mobileMenu:{chkMobile : "main-menu"}})" [checked]="mobileMenu.chkMobile == "main-menu" ? checked : "" " type="checkbox" id="mobile">
        
            <!-- Main menu -->
            <ul class="main-menu">
              <!-- Left links -->
              <li class="main-menu-logo">
                <a href="#" title="Google AMP Navigation · One page scrolling nav">
                  <amp-img
                    alt="Google AMP Navigation · One page scrolling nav"
                    title="Google AMP Navigation · One page scrolling nav"
                    src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                    width="28"
                    height="32"
                    class="img-logo">
                  </amp-img>
                  <span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
                </a>
              </li>
            <!-- /main-menu -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Let's create a target link targetOne

<a on="tap:AMP.setState({mobileMenu:{chkMobile : ""}}), targetOne.scrollTo(duration=1000)" title="Google AMP one page scrolling nav · Target 1">Target 1</a>

Let's create a target section targetOne

<section class="target">
  <a class="target-anchor" id="targetOne" title="One page scrolling nav target one"></a>
  <amp-position-observer on="enter:showAnim.start" layout="nodisplay"></amp-position-observer>
  ...
</section>

That's it ...

<header class="mega-menu">
  <div class="container">
    <div class="row">
      <div class="header">
        <div class="container">
          <nav class="main-menu" id="main-menu">
            <!-- Mobile Menu -->
            <label for="mobile" id="mobile-menu">
              <a href="#" title="Google AMP Navigation · One page scrolling nav">
                <amp-img
                  alt="Google AMP Navigation · One page scrolling nav"
                  title="Google AMP Navigation · One page scrolling nav"
                  src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                  width="21"
                  height="24"
                  class="img-logo">
                </amp-img>
                <span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
              </a>
          
              <span class="main-menu-dropdown-icon">
                <i class="hamburger"></i>
              </span>
            </label>
        
            <input on="change:AMP.setState({mobileMenu:{chkMobile : "main-menu"}})" [checked]="mobileMenu.chkMobile == "main-menu" ? checked : "" " type="checkbox" id="mobile">
        
            <!-- Main menu -->
            <ul class="main-menu">
              <!-- Left links -->
              <li class="main-menu-logo">
                <a href="#" title="Google AMP Navigation · One page scrolling nav">
                  <amp-img
                    alt="Google AMP Navigation · One page scrolling nav"
                    title="Google AMP Navigation · One page scrolling nav"
                    src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                    width="28"
                    height="32"
                    class="img-logo">
                  </amp-img>
                  <span class="logo">Google AMP <strong>CSS</strong> FRAMEWORK</span>
                </a>
              </li>

              <!-- Left links -->
              <li>
                <a on="tap:AMP.setState({mobileMenu:{chkMobile : ""}}), targetOne.scrollTo(duration=1000)" title="Google AMP one page scrolling nav · Target 1">Target 1</a>
              </li>
          
              <!-- Right links -->
              <li class="main-menu-right">
                <a on="tap:AMP.setState({mobileMenu:{chkMobile : ""}}), targetTwo.scrollTo(duration=1000)" title="Google AMP one page scrolling nav · Target 2">Target 2</a>
              </li>
            </ul>
            <!-- /main-menu -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Google AMP Target One

Taget one position


























Google AMP Target Two

Taget two position


























Google AMP Target Three

Taget Three position


























Google AMP Target Four

Taget Four position


























We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.