19

I'm trying to build a new trendy one page website where I scroll to a section on the page. I want to bring the "fixed" header to exactly where the content is. I am using the Zurb Foundation. This is what I have so far (some of the code found here):

  <li><%= link_to "Recent Work", "#", "data-scroll" => "recent" %></li>

  $(document).ready(function() {
$("a[data-scroll]").click(function() {
   var id = $(this).data("scroll")
    $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
        'slow');
});
 });

  <div id="recent">some content</div>

Problem I have is stated above. I want to bring my fixed header to exactly where this div is placed on the page. Please advise.

Brian
  • 5,661
  • 14
  • 49
  • 76

2 Answers2

32

There's a plugin for that.

Or just roll your own.

If you need to offset the "roll your own" solution then try the following:

$("#button").click(function() {
    var offset = 20; //Offset of 20px

    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top + offset
    }, 2000);
});
Community
  • 1
  • 1
cereallarceny
  • 4,696
  • 3
  • 34
  • 72
  • yeah, "roll your own" seem to be the code I found earlier; however, this seems to not offset correctly – Brian Apr 13 '13 at 18:34
  • See my revised answer for an offset. – cereallarceny Apr 13 '13 at 18:40
  • still doesn't seem to bring the fixed header down where I want it. – Brian Apr 13 '13 at 18:47
  • Could you perhaps explain your issue a little more then? – cereallarceny Apr 13 '13 at 20:01
  • The problem is that scrolltop only brings down the webpage to it's maximum size. For example, if I have X amount of content it will only scroll that far. It seems I would have to add a bunch of fluff at the top of page to actually give the effect of scrolling to the section I want it to. I want the fixed header at the top to be exactly to where the content is for the link e.g., About Me should take the header and page to the About Me section. – Brian Apr 13 '13 at 22:55
1

Over 5 years since this question was asked and answered, and things have changed a bit. Most people will probably be using Javascript frameworks like Angular or React now, but for those who are not (like myself, working on some older legacy projects), I have made some alterations on cereallarceny's answer.

This solution allows for scrolling on any element, not just the body, and takes into account any scrolling already made on the element.

$("#button").click(function() {

    // Find the element that you are scrolling (commonly body, but doesn't need to be!)
    var scrollingElement = $('#scrollingElement');

    // Find the element that you want to scroll to.
    var targetElement = $("#targetElement");

    // Stop any current animations (prevents a backlog of scroll animations for trigger-happy end-users)
    scrollingElement.stop();

    // Define the scrolling animation...
    scrollingElement.animate({
            scrollTop:
                // The distance in pixels from the top of the page to the top of the target element.
                targetElement.offset().top

                // The distance in pixels from the top of the page to the top of the scrolling element.
                - scrollingElement.offset().top

                // So far, the above two offsets determine how far down the scrolling element the target actually is...

                // The distance in pixels the scrolling element has ALREADY been scrolled.
                + scrollingElement.scrollTop()

                // SUCCESS! This will now take us to the target element.

                // OPTIONAL PART - SCROLLING OFFSET (for prettiness :])
                // This will change based on how you set up your page. Here are some examples...

                // To allow for a margin above your target...
                - parseFloat(targetElement.css("margin-top"))

                // To allow for padding from a parent element (in this case the scrolling element)...
                - parseFloat(scrollingElement.css("padding-top"))

                // If all else fails, you can always specify your own amount (in pixels)...
                - 20
        },
        200); // Duration in milliseconds of the scroll animation
});

Live Example

var listItem = $("li")

listItem.on("click", function() {
  var scrollingElement = $('#scrollingElement');
  var targetElement = $(this.dataset.link);

  scrollingElement.stop();
  scrollingElement.animate({
    scrollTop: targetElement.offset().top -
      scrollingElement.offset().top +
      scrollingElement.scrollTop() -
      parseFloat(targetElement.css("margin-top"))
  }, 200);
})
html,
body {
  background: #FFF;
  height: 100%;
  margin: 0;
}

li {
  cursor: pointer;
  list-style: none;
  margin: 10px;
}

li:hover {
  color: blue;
}

#links {
  border: solid 1px black;
  float: left;
  height: 90%;
  margin: 3%;
  width: 20%;
}

#scrollingElement {
  border: solid 1px black;
  float: left;
  height: 90%;
  margin: 3%;
  overflow: auto;
  width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div id="links">
    <ul>
      <li data-link="#head1">Heading 1</li>
      <li data-link="#head2">Heading 2</li>
      <li data-link="#head3">Heading 3</li>
      <li data-link="#head4">Heading 4</li>
      <li data-link="#head5">Heading 5</li>
    </ul>
  </div>
  <div id="scrollingElement">
    <h1 id="head1">Heading 1</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
      tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
      quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
      dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
      luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
    </p>
    <h1 id="head2">Heading 2</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
      tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
      quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
      dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
      luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
    </p>
    <h1 id="head3">Heading 3</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
      tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
      quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
      dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
      luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
    </p>
    <h1 id="head4">Heading 4</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
      tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
      quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
      dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
      luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
    </p>
    <h1 id="head5">Heading 5</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
      tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
      quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
      dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
      luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
    </p>
  </div>
</body>

</html>
Mark
  • 573
  • 4
  • 8