[SOLVED] Offset where Java scrolls to...

[Laudez]

Hi all,

I am trying to create a page with internal jumps. I have a nice little piece of code that scrolls the page down to the link. My problem is caused by the pages header is fixed, so when the link hits the top of the window, the linked item is partially hidden by the header.

 

I would love it if somebody would be able to tell me what I have to do to make the code scroll to the link and stop about 150px above it so its not hidden by the header.

 

This is the Javascript:

function ss_fixAllLinks() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a');
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
   var lnk = allLinks[i];
   if ((lnk.href && lnk.href.indexOf('#') != -1) &&  
       ( (lnk.pathname == location.pathname) ||
   ('/'+lnk.pathname == location.pathname) ) &&  
       (lnk.search == location.search)) {
     // If the link is internal to the page (begins in #)
     // then attach the smoothScroll function as an onclick
     // event handler
     ss_addEvent(lnk,'click',smoothScroll);
   }
}
}

function smoothScroll(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
   target = window.event.srcElement;
} else if (e) {
   target = e.target;
} else return;

// Make sure that the target is an element, not a text node
// within an element
if (target.nodeType == 3) {
   target = target.parentNode;
}

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;

// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
   var lnk = allLinks[i];
   if (lnk.name && (lnk.name == anchor)) {
     destinationLink = lnk;
     break;
   }
}

// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;

// Find the destination's position
var destx = destinationLink.offsetLeft;  
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&  
       (thisNode.offsetParent != document.body)) {
   thisNode = thisNode.offsetParent;
   destx += thisNode.offsetLeft;
   desty += thisNode.offsetTop;
}

// Stop any current scrolling
clearInterval(ss_INTERVAL);

cypos = ss_getCurrentYPos();

ss_stepsize = parseInt((desty-cypos)/ss_STEPS);
ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);

// And stop the actual click happening
if (window.event) {
   window.event.cancelBubble = true;
   window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
   e.preventDefault();
   e.stopPropagation();
}
}

function ss_scrollWindow(scramount,dest,anchor) {
wascypos = ss_getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss_getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
   // if we've just scrolled past the destination, or
   // we haven't moved from the last scroll (i.e., we're at the
   // bottom of the page) then scroll exactly to the link
   window.scrollTo(0,dest);
   // cancel the repeating timer
   clearInterval(ss_INTERVAL);
   // and jump to the link directly so the URL's right
   location.hash = anchor;
}
}

function ss_getCurrentYPos() {
if (document.body && document.body.scrollTop)
   return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
   return document.documentElement.scrollTop;
if (window.pageYOffset)
   return window.pageYOffset;
return 0;
}

function ss_addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
} else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
}
}  

var ss_INTERVAL;
var ss_STEPS = 25;

ss_addEvent(window,"load",ss_fixAllLinks);

 

I really don't know too much about javascript, mostly self taught html and css, so any help is so greatly appreciated!

 

Cheers,

Laudez.

[rhodesa]

i can't think of a good way to automatically fix this problem. instead, can you add an argument called "offset" to the function. Then the page using the function can just tell the function what the header offset should be?

[Laudez]

Hi Rhodesa,

 

Thanks for the input. Honestly that's where I start running into problems lol! I just really fail at understanding javascript. I'll have a look at it today and see what I can come up with.

 

Cheers,

Laudez

[rhodesa]

here is an example using jQuery...hope it helps:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript">
      var scrollOffset = 50;
      $(document).ready(function(){
        $('a[href*=#]').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
              var targetOffset = $target.offset().top - scrollOffset;
              $('html,body').animate({scrollTop: targetOffset}, 1000);
              return false;
            }
          }
        });
      });
    </script>
    <style type="text/css">
      #fixed_header {
        position: fixed;
        top: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background: green;
      }
      #content {
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div id="fixed_header"></div>
    <div id="content">
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
      <a name="section1"><h1>Section 1</h1></a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <a name="section2"><h1>Section 2</h1></a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <a name="section3"><h1>Section 3</h1></a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum massa sit amet risus sollicitudin viverra. Donec aliquam, dolor quis iaculis fermentum, mi felis blandit massa, vitae convallis turpis eros sit amet massa. Curabitur mollis lobortis dui, et suscipit diam aliquet vitae. Etiam ut odio eros. Proin vitae suscipit nisi. Phasellus pellentesque imperdiet interdum. Sed non lorem leo. Nam in massa purus, eu egestas sapien. Nulla massa lacus, lobortis nec dignissim a, vulputate in nisi. Maecenas ullamcorper eros in elit convallis at rhoncus risus vestibulum. Nam sagittis feugiat lacus, vel congue velit cursus tincidunt. Aliquam erat volutpat. Cras aliquam augue venenatis urna commodo lobortis. Sed commodo, leo vel gravida porttitor, neque erat pulvinar erat, sed dignissim arcu neque eleifend enim. Proin vel pellentesque erat. Curabitur feugiat, lacus at posuere ornare, purus justo facilisis erat, nec tempus erat orci eu ipsum. Maecenas lectus nunc, iaculis vitae gravida a, pellentesque et elit. Donec luctus pellentesque sem at tincidunt.</p>
    </div>
  </body>
</html>

 

 

[Laudez]

Oh my - THANK YOU! It works perfectly, such a simple piece of code compared to what I was trying to use, and I could actually understand it! I seriously cannot thank you enough - your a genius!!! I will be adding a line crediting this code to you, truly appreciated mate! Cheers!