Javascript-форум - Переход к якорю средством JS

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Переход к якорю средством JS (https://javascript.ru/forum/misc/56888-perekhod-k-yakoryu-sredstvom-js.html)

Переход к якорю средством JS

Всем привет. Использую такой не хитрый скрипт

<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
<li><a href="#six">Six</a></li>
</ul>

<h2 id="one">One</h2>
<h2 id="two">Two</h2>
<h2 id="three">Three</h2>
.....

<script type="text/javascript">
$(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
}, 900, 'swing', function () {
window.location.hash = target;
});
});

});
</script>
Все хорошо работает, но мне нужно, что бы когда пользователь нажал на ссылку, его переместило на якорь, в адресной строке добавилось допустим "#one" и к этой ссылке, т.е <a href="#one">One</a> присвоился класс - <a href="#one" class="One">One</a>
Можно как то это реализовать? Буду благодарен за помощь.

Попробуй так

$(document).ready(function(){
        $('a[href^="#"]').on('click.smoothscroll',function (e) {
            var self = $(this),
                target = this.hash,
                $target = $(target);

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

            return false;
        });
    });

Не работает.

Енот,
А можешь сказать что конкретно не работает может ошибки в консоле есть?
Вот смотри это при клике на Six http://prntscr.com/7qekkw

Весь код

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Timer</title>
    <script src="vendor/bower_components/jquery/dist/jquery.js"></script>
    <style>
        h2 {
            height: 100px;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">Four</a></li>
    <li><a href="#five">Five</a></li>
    <li><a href="#six">Six</a></li>
</ul>

<h2 id="one">One</h2>
<h2 id="two">Two</h2>
<h2 id="three">Three</h2>
<h2 id="four">four</h2>
<h2 id="five">five</h2>
<h2 id="six">six</h2>

<script type="text/javascript">
    $(document).ready(function(){
        $('a[href^="#"]').on('click.smoothscroll',function (e) {
            var self = $(this),
                target = this.hash,
                $target = $(target);

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

            return false;
        });
    });
</script>
</body>
</html>

Может, тут нужно присваивать другой класс ссылке?

Прошу прощения что долго не отвечал, не было интернета. Ну не работает) Класс не присваивается, при нажатии на меню.
Пробовал запускать чисто вашу страницу, безрезультатно.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>

<ul  style="padding-bottom:400px;">
 <li><a href="#one">One</a></li>
 <li><a href="#two">Two</a></li>
 <li><a href="#three">Three</a></li>
 <li><a href="#four">Four</a></li>
 <li><a href="#five">Five</a></li>
 <li><a href="#six">four</a></li>
 </ul>

 <h2 id="one">One</h2>
 <h2 id="two">Two</h2>
 <h2 id="three">Three</h2>
 <h2 id="four">Four</h2>
 <h2 id="five">Five</h2>
 <h2 id="six" style="padding-bottom:1000px;">Six</h2>
 .....

<style>
h2[id].active,
a.active {
  color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 function setcookie(f,e,h){if(h){var g=new Date();g.setDate(g.getDate()+h)}if(f&&e){document.cookie=f+"="+encodeURIComponent(e)+";path=/"+(h?"; expires="+g.toUTCString():"")}else return false;}
 function getcookie(e){var d=new RegExp(e+"=([^;]){1,}");var f=d.exec(document.cookie);if(f){f=f[0].split("=")}else{return false}return f[1]?decodeURIComponent(f[1]):false}

 var blkLink = $('a[href="#one"]').parents('ul:first').find('a');

 blkLink.click(function(e){
    e.preventDefault();
    blkLink.removeClass('active');
    $('h2[id]').removeClass('active');
    var hash = $(this).addClass('active').attr('href')
    setcookie('blkLink',hash,30);
    thScroll = $(hash).addClass('active').offset().top;
    $('html, body').stop().animate({'scrollTop': thScroll},time,'swing', function () {
        window.location.hash = hash;
    });
 });

 var time=0;
 var Lnk= getcookie('blkLink');
 if(Lnk) blkLink.parents('ul:first').find('a[href="'+Lnk+'"]').click();
 time=900;

});
</script>

</body>
</html>

Вот почти так) только не так) Присваивать класс нужно не h2 якорям
<ul style="padding-bottom:400px;">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
<li><a href="#six">four</a></li>
</ul>
А именно навигации) которое выше

Енот,
Если не нужно с H2 - класс снимите, class="active" на обоих элементах

Еще пседоселектор :target есть.

kostyanet,
И он может запомнить кликнутое на разных страницах, компетентный Вы наш ?
Покажите код с выделением цветом!