Question

我试图滚动到我的代码中的特定div，但它无法正常工作。我搜索了很多，并在其他资源中也找到了相同的代码。即使页面向下滚动，我也需要保持导航栏div可见。

<!DOCTYPE html>
    <html>
    <head>
        <title>Name</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            function goToByScroll(id){
              // Reove "link" from the ID
                //id = id.replace("link", "");
              // Scroll
              console.log("clicked "+id);
                $('html,body').animate({
                    scrollTop: $("#"+id).offset().top},
                    'slow');
            }

            $("#nav_bar_menu > div > a").click(function(e) { 
                  // Prevent a page reload when a link is pressed
                  console.log("Clicked "+ e);
                e.preventDefault(); 
                // Call the scroll function
                goToByScroll($(this).attr("id"));           
            });
        </script>
    </head>
    <body>
        <div class="nav">
            <div id="landing_profile"> <img src="me.jpg" class="profile_img"> </div>
            <div class="nav_bar" id="nav_bar_menu">
                <div id="home"> <a href="#" onclick="goToByScroll('home')">Home</a> </div>
                <div id="about_me"> <a href="#" onclick="goToByScroll('about_me')">About me</a> </div>
                <div id="projects"> <a href="#" onclick="goToByScroll('projects')">Projects</a> </div>
                <div id="contact"> <a href="#" onclick="goToByScroll('contact')">Contact</a> </div>
            </div>

        </div>

        <div id="main">
            <div id="home">
            <h1>Home</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds  dslajdlajd;ajsdas

            dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="about_me">
                <h1>About me</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds  dslajdlajd;ajsdas

            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="projects">
                <h1>Projects</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa

            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="contact">
            <h1>Contact</h1>
                <p>Mail me at</p>
                <a target="_top" href="mailto:me@gmail.com">me@gmail.com</a>
                <br><br>

            </div>
        </div>
    </body>
    </html>

滚动到div不起作用

0 个答案: