Jquery scroll to then highlight div with anchors

Question

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

$(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.

@monsterboy have a look at jQuery UI. They have an effect called "highlight" which is close to what you want: http://docs.jquery.com/UI/Effects/Highlight — Thomas Clayson, Mar 21 '13 at 12:07
Thanks Thomas, I'll check that out. I have changed the post a little to hopefully prevent confusion :) I was searching for a way to do the scrolling for quite some time and was very pleased when I found this code, I hope this can help someone searching for a quick and easy way to do it. — monsterboy, Mar 21 '13 at 12:14
I have just discovered a problem with the below code. I was using 'scrollTop': $target.offset().top-50 to adjust the position (notice the -50) which works great in Chrome but in firefox, IE it scrolls to the position then jumps up by 50 pixels. I hate it when I forget to check other browsers! — monsterboy, Mar 21 '13 at 12:55
Right have solved this by adding -50 to the end of "window.location.hash = target;" as well e.g. "window.location.hash = target-50;" Not sure why it works but, it does in all browsers :) — monsterboy, Mar 21 '13 at 13:05
That is because you scroll to the position then you set the window hash, which jumps you to the anchor (as if you've clicked an anchor link). Changing the hash to `target-50` works because there isn't an anchor with the name `target-50`, so it has no-where to jump to. — Thomas Clayson, Mar 21 '13 at 13:16
You can fix this by doing this before you animate the scroll: `var yScroll=document.body.scrollTop; window.location.hash = target; document.body.scrollTop=yScroll;` — Thomas Clayson, Mar 21 '13 at 13:17
...or even better add your anchor targets 50px above where the element is, then you don't have to "hack" the default functionality of the browsers. — Thomas Clayson, Mar 21 '13 at 13:18
Thanks again Thomas, can't figure out how to do this though without messing up my layout. Sure I will though once I've had a little rest, sometimes a quick kip followed by a cup of tea do wonders when your stuck on something :) — monsterboy, Mar 21 '13 at 13:58

score 2 · Accepted Answer · edited May 23 '17 at 10:28

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

Thanks mate, really appreciate your time, I'll have a play with this and see what I can come up with. I have just noticed another problem with the code I need to get sorted first. Just when you think you have solved something another problem shows itself, isn't always the way :) — monsterboy, Mar 21 '13 at 12:49

score 0 · Answer 2 · answered Apr 08 '16 at 14:46

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.

Jquery scroll to then highlight div with anchors

2 Answers2