ansaurus

Question

jQuery plugin to scroll page, change background and fade back on anchor click?

Answer 1

A:

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)

Yi Jiang 2010-10-03 01:49:46

Ah, many thanks! I'll let you know how it goes after dinner (and choose your answer if it's all gravy.)

Matt Untsaiyi 2010-10-03 01:52:25

It didn't work. I edited my original post for you (this comment wasn't long enough.)

Matt Untsaiyi 2010-10-03 02:30:01

@Matt See my edit. You're also using an old version of jQuery, FYI

Yi Jiang 2010-10-03 02:39:54

Hmm still nothing. Do spaces/tabs matter in JS? Edit: I didn't notice that, I'm also using the min version... eh, I could have sworn I wasn't. Maybe that's the problem.

Matt Untsaiyi 2010-10-03 02:46:59

I switched to `http://code.jquery.com/jquery-1.4.2.js` and it didn't solve the problem. If spaces/tabs matter in JS that's probably my problem... Programmer's Notepad is highlighting `$(document).ready(function(){` differently here compared to my `Cycle` plugins, and I'm guessing that's from spaces. But I'll wait for your reply first.

Matt Untsaiyi 2010-10-03 02:57:03

Edit: nope, I made them exactly the same... it's still highlighting the `$` differently though, weird.

Matt Untsaiyi 2010-10-03 03:03:00

Matt Untsaiyi 2010-10-03 03:11:58

ansaurus

tags:

views:

answers:

jQuery plugin to scroll page, change background and fade back on anchor click?

related questions