Search code examples
javascripthtmlcssnext.js13

I need a button to Alter the position of a page

so I have a page right and in the nav bar I have buttons I want that buttons to me to diferent positions of the page. By the Way I want to use the navbar to be stycky and use flex if anyone can help with that.

this sends me to:

this sends me to: enter image description here notice that it is in the buttom of the page

enter image description here

the other buttons will do the same

I am using daisy UI here is my navbar:

  <div className="drawer">
      <input id="my-drawer-3" type="checkbox" className="drawer-toggle" /> 
      <div className=" drawer-content flex flex-col self-start">
        {/* Navbar */}
        <div className="w-full navbar bg-[#009999cc]">
          <div className="flex-none lg:hidden">
            <label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </label>
          </div> 
          <div className="flex-1 px-2 mx-2 invert"><Image src='/ibmLogoBlack.jpg' alt='Ibm logo' width={90} height={90}/></div>
          <div className="flex-none hidden lg:block">
            <ul className="menu menu-horizontal">
              {/* Navbar menu content here */}
              <li className='m-5'><a href='#'>Evolução</a></li>
              <li className='m-5'><a href='#'>Publicidade</a></li>
              <li className='m-5'><a href='#'>Presença</a></li>
              <li className='m-5'><a href='#'>Conclusão</a></li>
            </ul>
          </div>
        </div>
        {/* Page content here */}
        {children}
      </div> 
      <div className="drawer-side">
        <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label> 
        <ul className="menu p-4 w-80 min-h-full bg-[#0099cccc]">
          {/* Sidebar content here */}
            <li className='m-2'><a href='#'>Evolução</a></li>
            <li className='m-2'><a href='#'>Publicidade</a></li>
            <li className='m-2'><a href='#'>Presença</a></li>
            <li className='m-2'><a href='#'>Conclusão</a></li>
        </ul>
      </div>
    </div>
Solution

  • To make your navbar sticky use this:

    postition: sticky;

    To make your buttons take you to certain pages, remove the buttons and change them to <a> and then use this:

    <!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>