文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >滚动到div不起作用。

问滚动到div不起作用。
EN

Stack Overflow用户
提问于 2015-09-13 09:05:57
回答 3查看 61关注 0票数 0

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

代码语言：javascript
复制
<!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>
javascript
jquery
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-09-13 09:20:07

最简单的方法是使用标签..。

​

代码语言：javascript
复制
#nav_bar_menu
{
    position: fixed;
    background-color: #fee;
}
代码语言：javascript
复制
        <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="#homelink">Home</a> </div>
                <div id="about_me"> <a href="#about">About me</a> </div>
                <div id="projects"> <a href="#projectslink">Projects</a> </div>
                <div id="contact"> <a href="#contactme">Contact</a> </div>
            </div>

        </div>

        <div id="main">
            <div id="home"><a name="homelink"></a>
            <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"><a name="about"></a>
                <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"><a name="projectslink"></a>
                <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"><a name="contactme"></a>
            <h1>Contact</h1>
                <p>Mail me at</p>
                <a target="_top" href="mailto:me@gmail.com">me@gmail.com</a>
                <br><br>

            </div>
        </div>

​

票数 0
EN

Stack Overflow用户

发布于 2015-09-13 09:11:54

问题是您有重复的ids。例如，您正在尝试使用id="contact"滚动到元素，它就是这样做的！只是它是第一个(菜单中的id )，而不是第二个(您想要访问的部分)。

解决方案:提供所有唯一的ids。

为了防止这类问题的发生，请通过W3C验证器运行您的代码，它将指出类似的错误。

我在您的代码中看到的另一个问题是，您有两个用于单击的例程，它们相互干扰。我评论了一个。

编辑:哦，你的另一句话。(这个问题应该是另一个问题。)

为了使导航栏在页面滚动时仍然可见，请给它position:fixed。

​

代码语言：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).parent().attr("id"));
});
*/
代码语言：javascript
复制
.nav {position:fixed; background:white; top:0; left:0; width:7em;}
body {padding-left:7em}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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_section')">Home</a> 
    </div>
    <div id="about_me"> <a href="#" onclick="goToByScroll('about_me_section')">About me</a> 
    </div>
    <div id="projects"> <a href="#" onclick="goToByScroll('projects_section')">Projects</a> 
    </div>
    <div id="contact"> <a href="#" onclick="goToByScroll('contact_section')">Contact</a> 
    </div>
  </div>

</div>

<div id="main">
  <div id="home_section">
    <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_section">
    <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_section">
    <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_section">
    <h1>Contact</h1>
    <p>Mail me at</p>
    <a target="_top" href="mailto:me@gmail.com">me@gmail.com</a>
    <br>
    <br>

  </div>
</div>

​

票数 2
EN

Stack Overflow用户

发布于 2015-09-13 09:12:04

您没有将正确的id传递给函数。将代码更改为以下一行：

代码语言：javascript
复制
goToByScroll($(this).parent().attr("id"));

而不是

代码语言：javascript
复制
goToByScroll($(this).attr("id"));

演示：http://jsfiddle.net/GCu2D/872/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32548071

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档