Javascript 滚动到div无效_Javascript_Jquery_Html

Javascript 滚动到div无效

javascript jquery html

Javascript 滚动到div无效,javascript,jquery,html,Javascript,Jquery,Html,我试图在代码中滚动到特定的div，但它不起作用。我搜索了很多，在其他资源中也找到了相同的代码。我还需要保持导航栏div可见，即使页面向下滚动 <!DOCTYPE html> <html> <head> <title>Name</title> <link rel="stylesheet" type="text/css" href="index.css"> <

我试图在代码中滚动到特定的

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>


名称
函数goToByScroll（id）{
//从ID重新激活“链接”
//id=id.replace（“链接”，“替换”）；
//卷轴
console.log（“单击”+id）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+id）.offset（）.top}，
“慢”）；
}
$（“导航栏菜单>分区>a”）。单击（功能（e）{
//防止在按下链接时重新加载页面
console.log（“单击”+e）；
e、 预防默认值（）；
//调用滚动功能
goToByScroll（$（this.attr（“id”））；
});
家
dslajdlajd；阿吉斯达斯
DSDASDADASDADADADAAAAAAAAAAASCS d as da dsa d ad ad ad ad adsa
这是一个很好的例子
d艾滋病防治工作；阿吉斯达斯
dslajdlajd；阿吉斯达斯
DSDASDADASDADADADAAAAAAAAAAASCS d as da dsa d ad ad ad ad adsa
这是一个很好的例子
艾滋病是一种常见的疾病
关于我
dslajdlajd；阿吉斯达斯
DSDASDADASDADADADAAAAAAAAAAASCS d as da dsa d ad ad ad ad adsa
这是一个很好的例子
d艾滋病防治工作；阿吉斯达斯
DSDASDADASDADADADAAAAAAAAAAASCS d as da dsa d ad ad ad ad adsa
这是一个很好的例子
艾滋病是一种常见的疾病
项目
dslajdlajd；阿吉斯达斯
DSDASDADASDADADADAAAAAAAAAAASCS d as da dsa d ad ad ad ad adsa
DSDASDADASDADADADAAAAAAAAAAASCS d as da dsa d ad ad ad ad adsa
这是一个很好的例子
艾滋病是一种常见的疾病
接触
寄到

问题是您的ID重复。例如，您试图使用

id=“contact”

滚动到元素，它确实如此！只是它是第一个（菜单中的id），而不是第二个（您试图进入的部分）

解决方案：为所有内容提供唯一的ID

为了防止此类问题的发生，请在中运行代码，这将指出类似的错误

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

编辑：哦，你的另一句话。（这应该是一个单独的问题。）
要使导航栏在页面滚动时仍可见，请将其设置为

位置：fixed

函数goToByScroll（id）{
//从ID重新激活“链接”
//id=id.replace（“链接”，“替换”）；
//卷轴
console.log（“单击”+id）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+id）.offset（）.top
},
“慢”）；
}
/*
$（“导航栏菜单>分区>a”）。单击（功能（e）{
//防止在按下链接时重新加载页面
console.log（“单击”+e）；
e、 预防默认值（）；
//调用滚动功能
goToByScroll（$（this.parent（）.attr（“id”））；
});
*/

.nav{位置：固定；背景：白色；顶部：0；左侧：0；宽度：7em；}
正文{padding left:7em}


家
dslajdlajd；作为一个数字助理和一个数字助理，一个数字助理和一个数字助理和一个数字助理，一个数字助理和一个数字助理，一个数字助理和一个数字助理，一个数字助理和一个数字助理；ajsdas dslajdlajd；ajsdas DSDASDADASADAAAAAAACS
作为日常生活和日常生活中的日常生活和日常生活中的日常生活和日常生活中的日常生活
关于我
dslajdlajd；作为一个数字助理和一个数字助理，一个数字助理和一个数字助理和一个数字助理，一个数字助理和一个数字助理，一个数字助理和一个数字助理，一个数字助理和一个数字助理；ajsdas DSDASDADASDADAAAAAAAAACS d as
在日常生活中，每天都有大量的日常生活和日常生活中的日常生活和日常生活中的日常生活和日常生活中的日常生活和日常生活中的日常生活和日常生活中的日常生活和日常生活中的日常生活和日常生活中的日常生活中的日常生活和日常生活中的日常生活
项目
dslajdlajd；作为一个数字助理和一个数字助理，作为一个数字助理和一个数字助理，作为一个数字助理和一个数字助理，作为一个数字助理和一个数字助理，作为一个数字助理和一个数字助理和一个数字助理
直接数字合成
接触
寄到

您没有向函数传递正确的id。将代码更改为此行：

goToByScroll($(this).parent().attr("id"));

而不是

goToByScroll($(this).attr("id"));

演示：

最简单的方法是使用标签

导航栏菜单
{
位置：固定；
背景颜色：#费用；
}

我的代码中没有使用该函数，sry对此表示怀疑