CODEWITHSUNDEEP
jqueryscrollanchor
monsterboy
monsterboy

Reputation: 153

Jquery scroll to then highlight div with anchors

I have a menu which uses Jquery to scroll smoothly to anchors I have setup which works great.

Example: http://jsfiddle.net/23VeR/

$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;
    });
});
});

Hopefully this will help someone else looking for a solution.

I have been searching for a way to highlight (then slowly fade back) the div after the scroll has finished but, can't find a simple solution as I'm a complete jquery noob.

Upvotes: 1

Views: 4131

Answers (2)

Cloud_Ratha
Cloud_Ratha

Reputation: 618

I've made a plugin that addresses this exact issue.

https://github.com/cloudratha/active-scroll-js

It uses a custom data attribute to link to a target id. Clicking the anchor will smooth scroll to the target element. It determines which anchor is closest to the current scroll position and highlights the anchor with a custom class.

Upvotes: 0

Thomas Clayson
Thomas Clayson

Reputation: 29925

Using just what you have at the moment, I've managed to do something by putting in a temporary element in the background to 'flash' - then removing it.

$('<div />')
    .css({
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'display':'none',
        'background':'red',
        'top':'0',
        'left':'0'
    })
    .prependTo($target)
    .fadeIn('fast', function(){
        $(this).fadeOut('fast', function(){
            $(this).remove();
        });
    });

http://jsfiddle.net/23VeR/1/

Unfortunately its being displayed infront of the text, so I've added some <div>s to the HTML and set a few position CSS attributes. So check this one out:

http://jsfiddle.net/23VeR/2/

Still might be worth looking at my link in the comments - or there are a few other plugins around which will let you animate the css background-color attribute.

Also, if you're not fussed about backwards compatibility then you can use CSS3 transitions. See this question for more info: Transition of background-color

Upvotes: 2

Related Questions