Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2015, 16:44
Интересующийся
Отправить личное сообщение для Енот Посмотреть профиль Найти все сообщения от Енот
 
Регистрация: 14.01.2015
Сообщений: 22

Переход к якорю средством 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>
Можно как то это реализовать? Буду благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2015, 21:25
Новичок на форуме
Отправить личное сообщение для ealexseen Посмотреть профиль Найти все сообщения от ealexseen
 
Регистрация: 07.07.2015
Сообщений: 3

Попробуй так
$(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, 23:08
Интересующийся
Отправить личное сообщение для Енот Посмотреть профиль Найти все сообщения от Енот
 
Регистрация: 14.01.2015
Сообщений: 22

Не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2015, 00:00
Новичок на форуме
Отправить личное сообщение для ealexseen Посмотреть профиль Найти все сообщения от ealexseen
 
Регистрация: 07.07.2015
Сообщений: 3

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

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

Последний раз редактировалось ealexseen, 09.07.2015 в 00:03.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2015, 21:46
Интересующийся
Отправить личное сообщение для Енот Посмотреть профиль Найти все сообщения от Енот
 
Регистрация: 14.01.2015
Сообщений: 22

Прошу прощения что долго не отвечал, не было интернета. Ну не работает) Класс не присваивается, при нажатии на меню.
Пробовал запускать чисто вашу страницу, безрезультатно.
Ответить с цитированием
  #6 (permalink)  
Старый 11.07.2015, 00:23
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

Последний раз редактировалось Deff, 11.07.2015 в 05:01.
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2015, 00:35
Интересующийся
Отправить личное сообщение для Енот Посмотреть профиль Найти все сообщения от Енот
 
Регистрация: 14.01.2015
Сообщений: 22

Вот почти так) только не так) Присваивать класс нужно не 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>
А именно навигации) которое выше
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2015, 00:43
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Енот,
Если не нужно с H2 - класс снимите, class="active" на обоих элементах
Ответить с цитированием
  #9 (permalink)  
Старый 11.07.2015, 07:50
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Еще пседоселектор :target есть.
Ответить с цитированием
  #10 (permalink)  
Старый 11.07.2015, 07:52
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

Последний раз редактировалось Deff, 11.07.2015 в 07:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход к якорю diakon Events/DOM/Window 5 22.07.2014 23:34
переход к якорю imediasun1 Элементы интерфейса 1 18.12.2013 21:23
JS Coaching для стартапа OlgaAyva Работа 12 27.09.2011 22:18
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 17:48