Anchor jump animation issues
So, one more question regarding my site: I am trying to animate an anchor jump with JQuery and I am using the following code. It seems to me that this should work, but it is not entirely true.
Forgot to mention: whenever any of the buttons in the header is clicked, an anchor jump must be performed.
$(function () {
$("a").click(function () {
if (this.hash) {
var hash = this.hash.substr(1);
var $scrollToElement = $("a[name=" + hash + "]");
var scrollToPosition = $scrollToElement.position().top;
$("html, body").animate({
scrollTop: scrollToPosition
}, 1000, "swing");
return false;
}
});
});
<div name="home" id="body_container">
<div id="banner_container">
<img id="banner" />
</div>
<div id="content_container">
<div name="over" id="over_content"></div>
<div name="contact" id="contact_content"></div>
</div>
</div>
You can see all the code in the JSFiddle
source to share
In addition to Harry's solution, you must change
var scrollToPosition = $scrollToElement.position().top;
to
var scrollToPosition = $scrollToElement.offset().top;
position () gives the relative offset to the container (which is 0 in your case), and the offset will give you the offset for the entire document, and this will help you scroll correctly.
source to share
There are several problems with your code, all of which together result in the code not working as you expect. They look like this:
-
this.hash
refers to a target that is part of the URL. To do this, an anchor tag must be set to return a valuehref
. (Like how<a href ='#over'
) - Whenever any of the links is clicked, the page should animate on the part of the page where the relevant content is present. To do this, you should target
div
the name you want, not the taga
. If you get a tagtop
taga
and try to animate it, there will be no movement because it is the same tag you clicked on.
Below fragmentation will address the issues and will work as expected: ( Note: Fragment has a positional issue, also fixed thanks to lozy219's answer.)
$(function() {
$("a").click(function() {
if (this.hash) {
var hash = this.hash.substr(1);
var $scrollToElement = $("div[name=" + hash + "]");
var headerHeight = $('header').height();
var scrollToPosition = $scrollToElement.offset().top - headerHeight;
$("html, body").animate({
scrollTop: scrollToPosition
}, 1000, "swing");
/* To add/remove class */
$('.menuItem').removeClass('selected'); // first remove class from all menu items
$(this).children('.menuItem').addClass('selected'); // then add to the clicked item
return false;
}
});
});
* {
padding: 0;
margin: 0 auto;
text-decoration: none;
}
body {
background: rgb(223, 227, 238);
text-align: center;
}
header {
min-width: 100%;
background: rgb(50, 50, 50);
height: 80px;
position: fixed;
z-index: 10;
}
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203, 207, 218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59, 89, 202);
height: calc(100% - 33px);
color: rgb(160, 170, 218);
}
.selected {
border-bottom: 4px solid rgb(59, 89, 202);
height: calc(100% - 33px);
color: rgb(160, 170, 218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: auto;
}
#content_container {
background: rgb(235, 235, 240);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
box-shadow: 0px 5px 10px rgb(235, 235, 240);
-webkit-box-shadow: 0px 5px 10px rgb(235, 235, 240);
}
#over_content {
width: 100%;
height: 1000px;
}
#contact_content {
background-color: rgb(200, 200, 200);
height: 1000px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" />
</div>
<a href="#home">
<div id="homeButton" class="menuItem selected">Home</div>
</a>
<a href="#over">
<div id="overButton" class="menuItem">Over</div>
</a>
<a href="#contact">
<div id="contactButton" class="menuItem">Contact</div>
</a>
<div id="mobile_menu_button"></div>
</div>
</header>
<div name="home" id="body_container">
<div id="banner_container">
<img id="banner" />
</div>
<div id="content_container">
<div name="over" id="over_content">Over menu content</div>
<div name="contact" id="contact_content">Contact menu content</div>
</div>
</div>
source to share