javascript - 如何防止我的平滑滚动 jquery 函数修改我的 div 元素的内容？-6ren

javascript - 如何防止我的平滑滚动 jquery 函数修改我的 div 元素的内容？

转载作者：太空宇宙更新时间：2023-11-04 06:37:21

我正在使用 jquery 来创建平滑滚动效果。当用户单击我页面上的“Person1”时，jquery 使用 anchor 链接成功向下滚动到页面底部的灰色 div。但是，它会修改所有绿色 div 的内容，以便将它们的内容向上推。这是为什么？如何在不影响绿色div内容的情况下让页面向下滚动？

<script src="https://code.jquery.com/jquery-1.9.0.min.js" integrity="sha256-f6DVw/U4x2+HjgEqw5BZf67Kq/5vudRZuRkljnbF344=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://louisville.edu/artsandsciences/styles/experimental/flexslider.css" type="text/css" media="screen" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<script defer src="https://gist.githubusercontent.com/bergantine/3868451/raw/a67f7e7989068013bfd0341cd523b843105c6d8d/gistfile1.js"></script> <!--referred to as modernizr.js in the flexslider package-->

<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>


<script type="text/javascript">

            $(window).load(function() {
              $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 210,
                itemMargin: 5,
                asNavFor: '#slider'
              });

              $('#slider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: "#carousel"
              });
            });

    $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
        var scrollBottom = $(window).scrollTop() + $(window).height();  
        $('div').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);    
    });

</script>

<style>

    .flex-nav-prev, .flex-nav-next{display: none;}   /*hide the left and right arrows*/

    #BackgroundContainer{
        background-color: white; 
        height: 1180px;
        background-size: cover;
    }

    .flexslider{
        margin-top: 4px;
        border: none !important; /*overrides the flexslider.css file style*/
    }

    .flex-viewport{width: 820px;}
    .flex-active-slide{width: 820px;}

    #slider{
        background: none; 
        margin-bottom: 20px;  /*overrides the flexslider.css file style*/
        min-height: 370px; /*no longer necessary? this reserves height for the slider and makes sure that the blurb at the bottom stays there as the page loads*/
    }

    #carousel{
        height: 40px;
        width: 910px;
        margin-right: 10px;
        margin-bottom: 0px;
        background-color: transparent; 
    }

    #carousel li{
        text-align: center;
    }   

    #carousel span{
        font-family: comfortaa;
        color: #165D7A; 
        font-size: 20px;
        line-height: 37px;
        text-align: center;
    }

    .Team_Container{margin-left: 10px;}

    .grid_cell{
        width: 144px;
        height: 164px; 
        display: inline-block;
        position: relative; 
        z-index: 0;
        margin-right: 10px;
        margin-bottom: 17px;
    }

/*

    .grid_cell:hover{z-index: 1;}   

    .grid_cell div:hover{   
        height: 346px; 
        background-color: rgba(176, 196, 222, 0.9) !important; 
        border-color: #7795BF !important;
        box-shadow: 0px 8px 20px 1px grey;
    }   

    .grid_cell div div:hover{height: 160px;}    

*/  

    .profile_container{
        position: absolute;
        height: 163px;
        width: 144px;
        overflow: hidden;
        display: inline-block;
        vertical-align: top;
        background-color: rgba(207, 232, 221, 0.6); /*light green almost transparent*/
        border: 2px solid #99D1E0;
        border-radius: 5px;
        text-align: -webkit-center;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }

    .profile_container span{
        display: block;
        width: 123px;
        margin-bottom: 5px;
        text-align: center;
        font-family: 'Comfortaa' !important;
        font-weight: bold;
        margin-right: auto;
        margin-left: auto;
        font-size: 11px;
    }

    .profile_container .employee_name{
        line-height: 18px;
        color: #395880; 
        font-size: 14px !important;
        word-spacing: 120px;
        width: 130px;
    }

    .profile_container .job_title{
        line-height: 17px;
    }

    .pic_container{
        height: 130px;
        width: 124px;
        border-radius: 150px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
        overflow: hidden;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }

    .profile_pic{height: 160px;}

    .department_description_container{
        width: 780px;
        min-height: 90px;
        vertical-align: middle;
        border-radius: 10px;
        background: linear-gradient(#DAE0E3, #C1D3DB);
        border: solid 2px #7F9AAD;
        padding: 10px;
        z-index: 0;
        margin-bottom: 85px; /*so that the profiles above this container have room to expand downward and still be visible*/
    }

    .department_description{
        font-family: comfortaa;
        color: #304F5E;
        font-size: 16px;
    }

</style>


<div id="BackgroundContainer">

<br>

<div id="carousel" class="flexslider">
  <ul class="slides">
    <li><a href="#"><span>Department1</span></a></li>
    <li><a href="#"><span>Department2</span></a></li>
  </ul>
</div>  

<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
        <div class="Team_Container">    
            <div class="grid_cell">
                <a href="#department_description_container1">
                <div class="profile_container">
                    <div class="pic_container"><img class="profile_pic" src="http://www.rhylcomicanddiscco.co.uk/wp-content/uploads/2016/04/generic-man-profile.jpg"></div>             
                    <span class="employee_name">Person1 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
                </a>
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person2 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person3 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>
            <div class="grid_cell"> 
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person4 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person5 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person6 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person7 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>  
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person8 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>  
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person9 LastName</span> <br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person10 LastName</span>    <br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person11 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person12 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>  
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person13 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person14 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

                <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person15 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person16 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person17 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div id="department_description_container1" class="department_description_container">
                <span class="department_description">Department 1 does X, Y, and Z.</span>  
            </div>  

        </div>          
    </li>

    <li>
        <div class="Team_Container">
            <div class="grid_cell">         
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person1 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person2 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>  
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                <div class="pic_container"></div>
                    <span class="employee_name">Person3 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>  
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person4 LastName</span> <br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>

            <div class="grid_cell">
                <div class="profile_container">
                    <div class="pic_container"></div>
                    <span class="employee_name">Person5 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>  
            </div>

            <div class="grid_cell"> 
                <div class="profile_container"><div class="pic_container"></div>
                    <span class="employee_name">Person6 LastName</span><br>
                    <span class="job_title">Job Position</span>
                    <span>Department</span>
                </div>
            </div>



            <div class="department_description_container">
                <span class="department_description">Department 2 does U, V, and W.</span>  
            </div>      

        </div>  
    </li>

  </ul>
</div>

</div>

最佳答案

您在此代码片段中使用的选择器过于笼统，您使用的是 div，这意味着当您单击链接时它将影响页面上的所有 div。

$('div').animate({
  scrollTop: $($.attr(this, 'href')).offset().top
}, 500);

有两个您感兴趣的选择器，即 html 和 body 标记，代码如下所示:

$('html, body').animate({
  scrollTop: $($.attr(this, 'href')).offset().top
}, 500);

关于javascript - 如何防止我的平滑滚动 jquery 函数修改我的 div 元素的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54102536/

文章推荐：无法在函数中进行函数调用以正常工作

文章推荐： java - 将搜索字段添加到 gson jtable

文章推荐： java - 将部署的 jar 引用为 Maven 依赖项

文章推荐： java - 将所有辅助类合并到一个巨大的类中是个好主意吗？

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
c - 下面的代码有什么问题？预期 X 由线程 Func 1 修改，随后 X 由线程 Func 2 修改
这个问题已经有答案了: Condition variable deadlock (2 个回答) 已关闭 5 年前。在研究多线程时，我编写了以下代码，但在屏幕上没有观察到输出。我在这里做错了什么？我期
修改.htaccess实现301域名重定向示例分享
复制代码代码如下: <IfModule mod_rewrite.c> RewriteEngineOn RewriteBase/ #将www.zzvips.com跳转到www.zzv
修改.htaccess实现子目录绑定示例分享
复制代码代码如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / # 把 www.zzvips.com
修改 Gateway和DNS的vbs脚本
复制代码代码如下: Const T_GATEWAY = "1.1.1.1" '网关 Const T_NEWDNS1 = "2.2.2.2" 'DNS1
ElasticSearch学习2 - 查询、修改
0. 修改索引大文本字段支持排序 PUT http://localhost:9200/lrc_blog/_mapping //请求体 { "properties": { "title": { "t
javascript - 修改 DOM
仅 react 当状态发生变化时重新渲染 . 那么为什么我会直接看到我对真实 DOM 所做的更改呢？我知道我正在修改真实的 DOM，但是当我根本没有改变状态时触发重新渲染的是什么。 import R
swiftui - 修改@FetchRequest
Xcode beta 5 推出 @FetchRequest对于 SwiftUI。我有一个 View ，它有一个 @FetchRequest . NSFetchRequest是在管理器中创建的，该管理
php - 修改/编译开源项目源代码的最佳方法是什么？
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
PHP preg_replace 修改
我有一个表达式[text][id]应替换为链接 text 解决方案是( id 是整数) $s = preg_replace("/\[([^\]]+)(\]*)\]\[([0-9]+)\]/","$1$
svn - 如何防止文件在颠覆中被提交/修改？
我在 repo 中有一个文件，我不想让任何人更新。我能做什么？最佳答案你想要svn锁:http://www.linxit.de/svnbook/en/1.2/svn.ref.svn.c.lock
powershell - 修改/转换选择对象中的数据
说我有项目 list 。我想导出到csv，但在此之前我想做一些计算/修改。基本上，设置如下所示: PS C:\Files> gci Directory: C:\Files Mode
Java API 修改
我有一个非常简单的问题 - 是否可以修改 Java API 的源代码，例如Junit，JABX ？我知道这似乎是一个非常愚蠢的问题，但它一直困扰着我一段时间。最佳答案如果您可以掌握源代码，那么请
r - 修改/添加列到嵌套的tibble
我有一个带有变量/列的小标题，其中包括不同形状的小标题列表。我想为其中一个变量中的每个(子)标题添加一个变量/列。例如此类数据 library("tibble") aaa aaa # A tibb
Javascript url 修改
我有几个菜单，可以在单击时向当前链接添加变量。这是一个例子: 1 2 3 x y z 我的问题是，如果我选择“y”2次，它会添加“&cord=y”2次。相反，我希望它替
.net - 修改.NET服务安装程序的安装路径
我有两个项目:一个服务项目和一个服务安装程序项目。服务项目具有适合我的产品的装配信息。它包括公司信息和正确的服务名称。一旦服务实际安装，所有这些似乎都会被忽略。安装服务时，它使用在服务安装程序的ini
perl - 修改$_的时候会出错吗？
以下代码何时可能产生副作用？ @some = map { s/xxx/y/; $_ } @some; perlcritic 将其解释为危险的，因为例如: @other = map { s/xxx/y/
java - 修改.class文件
我想知道以下哪种解决方案更好:我想修改一些 .class 文件，我意识到有两种方法可以做到这一点: 反编译.class文件，修改它，最后再次编译。 - 直接用十六进制编辑器修改。谢谢最佳答案在这
java - 修改 addMouseListener()
这是我的按钮代码 onclick 我希望我的程序等待用户单击一个 JPanel，并且当用户单击 JPanel 时，它应该在控制台上打印其名称。此按钮代码未显示输出 JPopupMenu popu
java - 修改/设置从访问器方法返回的字符串
我正在使用一个具有“getName()”方法的特定 API。 getName() 返回一个字符串。是否可以修改该字符串？ API 中不包含修饰符方法，并且 String getName() 返回的是私

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何防止我的平滑滚动 jquery 函数修改我的 div 元素的内容？