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

Question

I am using jquery to create a smooth-scrolling effect. When the user clicks on "Person1" on my page, jquery successfully scrolls down smoothly to the gray div at the bottom of the page using anchor links. However, it modifies the content of all the green divs so that their content is pushed upward. Why is that? How can I make the page scroll down without affecting the content of the green divs?

<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>

Answer 1

You are using a selector that's too general in this code fragment, you're using div which means it will affect all the divs on your page when you click the link.

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

There's two selectors that you're interested in and that's both the html and the body tag, the code would look like this:

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