Scroll po wczytaniu strony

pytanie zadane 11 lipca 2020 w JavaScript przez Mikes_Pl Nowicjusz (180 p.)
edycja 11 lipca 2020 przez Mikes_Pl

Cześć mam szybkie pytanie jak zrobić w czystym JS żeby po wczytaniu strony scroll automatycznie przewinął się do wybranego elementu?

3 odpowiedzi

odpowiedź 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 12 lipca 2020 przez Mikes_Pl

odpowiedź 12 lipca 2020 przez VBService Ekspert (253,340 p.)
edycja 12 lipca 2020 przez VBService

scroll-js.html [ window.scrollTo ]

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">

    <style>
        body {
            width: 50%;
            margin: 0 auto;
        }
        i {
            background-color: red;
            color: white;
            font-style: normal;
            font-family: Tahoma;
            font-size: 10px;
        }
        p {
            margin-bottom: 100vh;
        }
    </style>
    </head>
    <body>
        <p>Ut congue leo accumsan pretium feugiat. Maecenas pharetra turpis massa, eu mollis tellus dignissim non. Phasellus ac tortor eu tortor dignissim auctor. Morbi lobortis, dolor et porttitor faucibus, est magna condimentum sapien, vel placerat arcu tellus in nunc. Praesent sit amet sagittis nunc, ac rutrum ex. Sed sollicitudin nisl vel odio convallis, nec ornare lectus dapibus. Cras tincidunt sem a eros semper, varius fringilla purus dictum. Etiam id tellus iaculis, congue quam nec, sagittis erat. Duis sem mi, tincidunt et iaculis sed, dapibus non diam. Ut porta quis mauris in luctus. Pellentesque commodo turpis eget aliquet consequat. Maecenas sed diam sed justo tincidunt cursus in a neque. Vestibulum laoreet ante sit amet convallis vestibulum.</p>
        <p>Ut congue leo accumsan pretium feugiat. Maecenas pharetra turpis massa, eu mollis tellus dignissim non. Phasellus ac tortor eu tortor dignissim auctor. Morbi lobortis, dolor et porttitor faucibus, est magna condimentum sapien, vel placerat arcu tellus in nunc. Praesent sit amet sagittis nunc, ac rutrum ex. Sed sollicitudin nisl vel odio convallis, nec ornare lectus dapibus. Cras tincidunt sem a eros semper, varius fringilla purus dictum. Etiam id tellus iaculis, congue quam nec, sagittis erat. Duis sem mi, tincidunt et iaculis sed, dapibus non diam. Ut porta quis mauris in luctus. Pellentesque commodo turpis eget aliquet consequat. Maecenas sed diam sed justo tincidunt cursus in a neque. Vestibulum laoreet ante sit amet convallis vestibulum.</p>

        <p id="anch1"><i>Anchor 1</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a metus id libero scelerisque convallis. Nullam gravida felis sit amet sem ornare porta. Aliquam scelerisque feugiat quam, eget scelerisque risus tempus eget. Nam finibus, ex in aliquet laoreet, lorem felis posuere felis, at consequat odio lectus non est. Ut rhoncus dignissim auctor. Donec at sapien placerat, consectetur dui ut, egestas magna. Ut sed tellus dolor. Curabitur vel vestibulum justo. Donec scelerisque, purus eget commodo lacinia, odio ante molestie leo, in fermentum dolor arcu et turpis. Proin aliquam lobortis metus ut ultricies. Pellentesque fermentum sit amet neque vel porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel dui purus. Curabitur turpis lectus, finibus non gravida at, efficitur id justo. Morbi commodo nulla id mollis commodo. Fusce id nisi interdum, efficitur mauris in, cursus urna. Duis vel interdum dui, eget tincidunt arcu. Sed quis pharetra ligula. Nam eros nisl, posuere eu ullamcorper non, interdum vel turpis. Ut non mollis eros. Etiam elementum condimentum porttitor. Praesent in sagittis ex, at mollis enim.</p>
        <p>Ut congue leo accumsan pretium feugiat. Maecenas pharetra turpis massa, eu mollis tellus dignissim non. Phasellus ac tortor eu tortor dignissim auctor. Morbi lobortis, dolor et porttitor faucibus, est magna condimentum sapien, vel placerat arcu tellus in nunc. Praesent sit amet sagittis nunc, ac rutrum ex. Sed sollicitudin nisl vel odio convallis, nec ornare lectus dapibus. Cras tincidunt sem a eros semper, varius fringilla purus dictum. Etiam id tellus iaculis, congue quam nec, sagittis erat. Duis sem mi, tincidunt et iaculis sed, dapibus non diam. Ut porta quis mauris in luctus. Pellentesque commodo turpis eget aliquet consequat. Maecenas sed diam sed justo tincidunt cursus in a neque. Vestibulum laoreet ante sit amet convallis vestibulum.</p>
        <p id="anch2"><i>Anchor 2</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a metus id libero scelerisque convallis. Nullam gravida felis sit amet sem ornare porta. Aliquam scelerisque feugiat quam, eget scelerisque risus tempus eget. Nam finibus, ex in aliquet laoreet, lorem felis posuere felis, at consequat odio lectus non est. Ut rhoncus dignissim auctor. Donec at sapien placerat, consectetur dui ut, egestas magna. Ut sed tellus dolor. Curabitur vel vestibulum justo. Donec scelerisque, purus eget commodo lacinia, odio ante molestie leo, in fermentum dolor arcu et turpis. Proin aliquam lobortis metus ut ultricies. Pellentesque fermentum sit amet neque vel porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel dui purus. Curabitur turpis lectus, finibus non gravida at, efficitur id justo. Morbi commodo nulla id mollis commodo. Fusce id nisi interdum, efficitur mauris in, cursus urna. Duis vel interdum dui, eget tincidunt arcu. Sed quis pharetra ligula. Nam eros nisl, posuere eu ullamcorper non, interdum vel turpis. Ut non mollis eros. Etiam elementum condimentum porttitor. Praesent in sagittis ex, at mollis enim.</p>

    <script>
        scrollToAnch("anch1");
        setTimeout(scrollToAnch, 2000, "anch2");

        function scrollToAnch(id) {
            const el = document.querySelector(`#${id}`);
            const pos = el.getBoundingClientRect().top + window.pageYOffset;

            window.scrollTo({
                top: pos,
                behavior: 'smooth'
            });
        }
    </script>
    </body>
</html>

[ Window.pageYOffset ] [ element.getBoundingClientRect ]

odpowiedź 12 lipca 2020 przez VBService Ekspert (253,340 p.)

scroll-js.html [ element.scrollIntoView ]

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">

    <style>
        body {
            width: 50%;
            margin: 0 auto;
        }
        i {
            background-color: red;
            color: white;
            font-style: normal;
            font-family: Tahoma;
            font-size: 10px;
        }
        p {
            margin-bottom: 100vh;
        }
    </style>
    </head>
    <body>
        <p>Ut congue leo accumsan pretium feugiat. Maecenas pharetra turpis massa, eu mollis tellus dignissim non. Phasellus ac tortor eu tortor dignissim auctor. Morbi lobortis, dolor et porttitor faucibus, est magna condimentum sapien, vel placerat arcu tellus in nunc. Praesent sit amet sagittis nunc, ac rutrum ex. Sed sollicitudin nisl vel odio convallis, nec ornare lectus dapibus. Cras tincidunt sem a eros semper, varius fringilla purus dictum. Etiam id tellus iaculis, congue quam nec, sagittis erat. Duis sem mi, tincidunt et iaculis sed, dapibus non diam. Ut porta quis mauris in luctus. Pellentesque commodo turpis eget aliquet consequat. Maecenas sed diam sed justo tincidunt cursus in a neque. Vestibulum laoreet ante sit amet convallis vestibulum.</p>
        <p>Ut congue leo accumsan pretium feugiat. Maecenas pharetra turpis massa, eu mollis tellus dignissim non. Phasellus ac tortor eu tortor dignissim auctor. Morbi lobortis, dolor et porttitor faucibus, est magna condimentum sapien, vel placerat arcu tellus in nunc. Praesent sit amet sagittis nunc, ac rutrum ex. Sed sollicitudin nisl vel odio convallis, nec ornare lectus dapibus. Cras tincidunt sem a eros semper, varius fringilla purus dictum. Etiam id tellus iaculis, congue quam nec, sagittis erat. Duis sem mi, tincidunt et iaculis sed, dapibus non diam. Ut porta quis mauris in luctus. Pellentesque commodo turpis eget aliquet consequat. Maecenas sed diam sed justo tincidunt cursus in a neque. Vestibulum laoreet ante sit amet convallis vestibulum.</p>

        <p id="anch1"><i>Anchor 1</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a metus id libero scelerisque convallis. Nullam gravida felis sit amet sem ornare porta. Aliquam scelerisque feugiat quam, eget scelerisque risus tempus eget. Nam finibus, ex in aliquet laoreet, lorem felis posuere felis, at consequat odio lectus non est. Ut rhoncus dignissim auctor. Donec at sapien placerat, consectetur dui ut, egestas magna. Ut sed tellus dolor. Curabitur vel vestibulum justo. Donec scelerisque, purus eget commodo lacinia, odio ante molestie leo, in fermentum dolor arcu et turpis. Proin aliquam lobortis metus ut ultricies. Pellentesque fermentum sit amet neque vel porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel dui purus. Curabitur turpis lectus, finibus non gravida at, efficitur id justo. Morbi commodo nulla id mollis commodo. Fusce id nisi interdum, efficitur mauris in, cursus urna. Duis vel interdum dui, eget tincidunt arcu. Sed quis pharetra ligula. Nam eros nisl, posuere eu ullamcorper non, interdum vel turpis. Ut non mollis eros. Etiam elementum condimentum porttitor. Praesent in sagittis ex, at mollis enim.</p>
        <p>Ut congue leo accumsan pretium feugiat. Maecenas pharetra turpis massa, eu mollis tellus dignissim non. Phasellus ac tortor eu tortor dignissim auctor. Morbi lobortis, dolor et porttitor faucibus, est magna condimentum sapien, vel placerat arcu tellus in nunc. Praesent sit amet sagittis nunc, ac rutrum ex. Sed sollicitudin nisl vel odio convallis, nec ornare lectus dapibus. Cras tincidunt sem a eros semper, varius fringilla purus dictum. Etiam id tellus iaculis, congue quam nec, sagittis erat. Duis sem mi, tincidunt et iaculis sed, dapibus non diam. Ut porta quis mauris in luctus. Pellentesque commodo turpis eget aliquet consequat. Maecenas sed diam sed justo tincidunt cursus in a neque. Vestibulum laoreet ante sit amet convallis vestibulum.</p>
        <p id="anch2"><i>Anchor 2</i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a metus id libero scelerisque convallis. Nullam gravida felis sit amet sem ornare porta. Aliquam scelerisque feugiat quam, eget scelerisque risus tempus eget. Nam finibus, ex in aliquet laoreet, lorem felis posuere felis, at consequat odio lectus non est. Ut rhoncus dignissim auctor. Donec at sapien placerat, consectetur dui ut, egestas magna. Ut sed tellus dolor. Curabitur vel vestibulum justo. Donec scelerisque, purus eget commodo lacinia, odio ante molestie leo, in fermentum dolor arcu et turpis. Proin aliquam lobortis metus ut ultricies. Pellentesque fermentum sit amet neque vel porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel dui purus. Curabitur turpis lectus, finibus non gravida at, efficitur id justo. Morbi commodo nulla id mollis commodo. Fusce id nisi interdum, efficitur mauris in, cursus urna. Duis vel interdum dui, eget tincidunt arcu. Sed quis pharetra ligula. Nam eros nisl, posuere eu ullamcorper non, interdum vel turpis. Ut non mollis eros. Etiam elementum condimentum porttitor. Praesent in sagittis ex, at mollis enim.</p>

    <script>
        scrollToAnchTop("anch1");
        setTimeout(scrollToAnchTop, 2000, "anch2");

        function scrollToAnchTop(id) {
            const el = document.querySelector(`#${id}`);
            el.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    </script>
    </body>
</html>