jQuery plugin to scroll page, change background and fade back on anchor click?_问答_开发者

My nav looks like this:

<a href="index.html" class="nav">Home</a>
<a href="about.html" class="nav">About</a>
<a href="#" class="nav">Services</a>
<a href="contact.html" class="nav">Contact</a>

On index.html I briefly mention the two services offered and include a "read more" link for each one. It looks like this:

<div style="width:468px; height:180px; float:left; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;font-size:13px;line-height:17px;color:#666666;">
<span class="article"><b style="font-size:14px; color:#000000">Service #1</span>
<div style="padding-right:24px; padding-top:6px;font-size:12px; line-height:18px; color:#333333">Description</div> <!-- end "div" -->
<a href="vpn.html" class="readmore">Read More</a>
<div style="clear:both; font-size:1px; line-height:1px;"></div> <!-- end "div" -->
</div> <!-- end "div" -->
<div style=" width:228px; height:180px; margin-left:12px; float:left; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;font-size:13px;line-height:17px;color:#666666;">
<span class="article"><b style="font-size:14px; color:#000000">Service #2</b></span>
<div style="padding-top:6px;font-size:12px; line-height:18px; color:#333333">Description. <a href="#" class="readmore">Read More</a>
</div> <!-- end "div" -->
</div> <!-- end "div" -->

Instead of being redundant and creating a services.html page, only to say the same thing I do on index.html and include more "read more" links, I'd like to do something with jQuery (sin开发者_StackOverflow社区ce I'm already using it + Cycle for testimonials.)

When the services link is clicked, on whatever page, I would like it to go to index.html, scroll to the two divs describing the services, change the background color (to yellow) for emphasis, and then fade back to normal (white.)

Is there a plugin for jQuery that will do this? Or how can I? I was looking at bgFader but since there's no demo I'm not sure this is what I'm looking for (and I don't know JS.)

EDIT

@Yi Jiang - It didn't work. I added this to my <head>:

<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<!-- include Color plugin --> 
<script type="text/javascript" src="js/jquery.color.js"></script> 
<script type="text/javascript"> 
if(window.location.hash === '#services') {
    var service = $('#services');
    var originalColor = $('#services').css('background-color');

    $('#services').css('background-color', '#FFEE9F').animate({
        'background-color': originalColor
    }, 1000);
}
</script>

And added id="services" to one div (for testing) and changed my anchor to index.html#services. It scrolls to the right place (thanks!) but it doesn't change the background or do anything besides scroll. Did I screw something up?

Well, it's rather simple actually. First, to get the scrolling bit, you can use a hash to point to the relevant part of the document. Add an id to the div you want to scroll to, like say services, then use the URL index.html#services to get the link to automatically go to the homepage and scroll to the services part of the page.

Next, to get the highlighting, you'd want to use window.location.hash to see if you're pointing to the services section. Then we can use the jQuery color plugin to get color animation. The code would look something like:

if(window.location.hash === '#services') {
    var service = $('#services');
    var originalColor = $('#services').css('background-color');

    $('#services').css('background-color', '#FFEE9F').animate({
        'background-color': originalColor
    }, 1000);
}

PS: You might want to clean up your HTML a bit. The b tag, for instance, is deprecated ans should not be used, and inline styles should also be moved to separate CSS files.

Edit: You need to wrap everything in a $(document).ready handler, as with all jQuery code, like this. Otherwise, change the duration so that it takes longer to return back to the original color, so that the change is more noticeable, and that the color plugin is correctly embedded:

$(document).ready(function(){
    if(window.location.hash === '#services') {
        var service = $('#services');
        var originalColor = service.css('background-color');

        service.css('background-color', '#FFEE9F').animate({
            'background-color': originalColor
        }, 3000); // Change duration here
    }
});

Tabs shouldn't make any difference (not really sure which tabs you're referring to here)