HTML and jQuery anchoring

Question

Whenever the url contains the div id, it would obviously go down to the div when the URL has:

http://domain.com.faq.php#1

<div id="1">Bla bla bla</div>

But what I like is to have same feature of Stackoverflow, when you click on an answer in your messages, it will scroll down to the page and has that fadeOut effect on the answer.

How do I do this?

Answer 1

StackOverflow uses anchors as well. The post you're currently reading is: http://stackoverflow.com/questions/2945207/html-and-jquery-anchoring/2945227#2945227

It's simply <a name="anchorName"></a>
at the address bar: [urlToPage]#anchorName

---

Now, to get the fade effect [in pure JS w/o frameworks]

Set the div.style.opacity = 0;

var intervalId = setInterval( function(){
  if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);

The clearInterval part isn't necessary, since once opacity goes above 1, browser won't render differently [although the number keeps adding...]

Answer 2

Use:

event.preventDefault(); 

For example:

$('li.share a').click(function(ev) {
        ev.preventDefault();
        var link = ev.target.href;
        var id = link.substring(link.indexOf("#") + 1);
        $('#' + id).fadeOut();
    });

Answer 3

Animation to a valid anchor destination cannot be animated on page load that I know of since the browsers will default to scrolling the user down the page to the anchor. For in-page links, you can hijack the anchor links and animate.

However, on new page loads like on SO, you will notice the page does not animate down, but just scrolls down, though the box does animate a color. This is how you could do it in jQuery. Be sure to include the color plugin if you want to animate background-colors.

<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
   $(window).load(function(){
        var hash = window.location.hash;
        if(hash){
          $(hash).css('backgroundColor', '#AA0000')
                 .animate({backgroundColor: '#FFFFFF'}, 200);
        }
   });
</script>   

You can use DOMReady instead of load, but it might try to run your animation too soon, and the user will miss it.

If you only wanted to animate div's with a specific class, you can add a filter to your find:

$(hash).filter('.my_div').css ...