The easiest Onepager

Hier stelle ich ein sehr einfaches Script für einen Onepager vor, mit minimalem Javascript/jQuery realisiert.

Im Menü die ID's der Abschnitte festlegen.

HTML

  <header id="masthead">
                    <nav id="primary-menu">
                     <ul>
                    <li><a href="#section1">HTML</a></li>                               
                    <li><a href="#section2">CSS</a></li>     
                    <li><a href="#section3">jQuery</a></li>
                    <li><a href="#section4">Javascript</a></li>       
                    </ul>
                    </nav>
                    </header>

Select

CSS

html {
                    scroll-behavior: smooth;
                    }
                    #masthead {
                    position: fixed;
                    top:0;
                    left:0;
                    width:100%;
                    }

Select

jQuery

(function ($) {
                    function setHeight() {
                    var navHeight= $("#masthead").outerHeight(); //Navigations-Container
                    $("html").css("scroll-padding-top", navHeight); 
                    $("#page").css("margin-top", navHeight); //Content-Bereich
                    }
                    setHeight();
                    $(window).resize(function () {
                    setHeight();
                    });
                    })(jQuery);

Select

Javascript

function setHeight() { 
                    var navHeight= document.querySelector("#masthead").offsetHeight+"px"; //Navigations-Container
                    document.querySelector("html").style.scrollPaddingTop = navHeight;
                    document.querySelector("#page").style.marginTop = navHeight; //Content-Bereich
                    }
                    setHeight();
                    window.addEventListener('resize', function () {
                    setHeight();
                    });

Select

Und schon hat man den vielleicht einfachsten Onepager realisiert!