How do I prevent my smooth-scroll jquery function from modifying the contents of my div elements?
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>
1 answers
solution1
1 ACCPTED 2019-01-09 02:54:35
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to do a smooth-scroll?
How to smooth-scroll to an anchor tag from another page in NextJS?
How do I prevent my function from modifying a string within a constant?
How do I prevent my DIV element from wrapping around each of my P elements?
JavaScript animated smooth-scroll
smooth-scroll js not scrolling
Trying to connect Smooth Div Scroll Jquery to my site but its not connecting?
How to not showing the #id in URL with cferdinandi/smooth-scroll
How to smooth-scroll javascript scrollLeft in Vue3?
Why are [my] CSS3/jQuery transitions so imperfectly smooth, and how do I make them more smooth?
Related Tags