使用 jQuery 滚动到一个 div

小编典典

使用 jQuery 滚动到一个 div

all

所以我有一个侧面有一个固定链接栏的页面。我想滚动到不同的 div。基本上该页面只是一个长网站，我想使用侧面的菜单框滚动到不同的 div。

这是我到目前为止的 jQuery

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

问题是它在加载时会自动转到联系人 div，然后当我#contactlink在菜单中按下时它会滚动回顶部。

编辑：HTML

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

阅读 62

2022-06-23

共1个答案

小编典典

首先，您的代码不包含contactdiv，它有一个contactsdiv！

在侧边栏中，您拥有contact页面底部的 div
contacts。我删除了s代码示例的最终版本。（您还在侧边栏中拼错了projectslinkid）。

其次，看一下jQuery 参考页面上单击的一些示例。您必须使用 click
like，object.click( function() { // Your code here } );才能将 click
事件处理程序绑定到对象......就像下面的示例一样。顺便说一句，您也可以通过使用不带参数的对象来触发对对象的单击，例如object.click().

第三，scrollTo是jQuery中的一个插件。不知道你有没有安装插件。scrollTo()没有插件就无法使用。在这种情况下，您想要的功能只有
2 行代码，所以我认为没有理由使用该插件。

好的，现在开始解决方案。

如果您单击侧边栏中的链接，下面的代码将滚动到正确的 div。窗口必须足够大才能允许滚动：

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

现场示例

~~（滚动到从这里获取的功能）~~

PS：显然你应该有一个令人信服的理由走这条路而不是使用锚标签<a href="#gohere">blah</a>......<a name="gohere">blah title</a>

2022-06-23