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

+3


source to share


2 answers


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.

try http://jsfiddle.net/eax7ppwb/2/

+2


source


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

    . (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 tag a

    . If you get a tag top

    tag a

    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>
      

Run codeHide result


+2


source







All Articles