Форум

Енот · #1 (**permalink**) 08.07.2015, 15:44

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

<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>
Можно как то это реализовать? Буду благодарен за помощь.

ealexseen · #2 (**permalink**) 08.07.2015, 20:25

Попробуй так

$(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;
        });
    });

Енот · #3 (**permalink**) 08.07.2015, 22:08

Не работает.

ealexseen · #4 (**permalink**) 08.07.2015, 23:00

Енот,
А можешь сказать что конкретно не работает может ошибки в консоле есть?
Вот смотри это при клике на 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>

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

Енот · #5 (**permalink**) 10.07.2015, 20:46

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

Deff · #6 (**permalink**) 10.07.2015, 23:23

<!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>

Енот · #7 (**permalink**) 10.07.2015, 23:35

Вот почти так) только не так) Присваивать класс нужно не 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>
А именно навигации) которое выше

Deff · #8 (**permalink**) 10.07.2015, 23:43

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

kostyanet · #9 (**permalink**) 11.07.2015, 06:50

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

Deff · #10 (**permalink**) 11.07.2015, 06:52

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

Форум

Справочник

Discord чат

Курсы javascript