Как сделать плавный переход к якорю

@killlfun · Регистрация: 25.02.2014

Студворк — интернет-сервис помощи студентам

У меня есть якоря на странице и соответственно есть ссылки на них.
Но при нажатии меня резко перекидывает на то место где у меня якорь, а как сделать так что бы было видно как сайт пролистывается при этом и только тогда приходит к якорю?

HTML5
1
2
<a href="#harakteristiki" class="har_nar">Характеристики</a>
<a href="#kakrabotaet" class="opisanie_nav">Описание</a>

Код.....

HTML5
1
2
<div id="kakrabotaet">
</div>

Код...

HTML5
1
2
<div id="harakteristiki">
</div>

@Заглянувший · 10.03.2014, 10:23

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 500px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <a href="#kakrabotaet" class="opisanie_nav smoothScroll">Описание</a>
    <a href="#harakteristiki" class="har_nar smoothScroll">Характеристики</a>
    <div id="kakrabotaet">
        Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, non, velit, nostrum deserunt totam dicta voluptate perferendis quos architecto possimus deleniti quae! Dolore accusamus maiores unde fugit fugiat obcaecati nisi.
    </div>
    <div id="harakteristiki">
        Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, ad, corporis, quia, voluptate voluptatibus rem provident molestias nesciunt labore sit mollitia repellendus eum autem recusandae reprehenderit asperiores deserunt nostrum accusantium!
    </div>
    <script>
        $('.smoothScroll').click(function(event) {
            event.preventDefault();
            var href=$(this).attr('href');
            var target=$(href);
            var top=target.offset().top;
            $('html,body').animate({
              scrollTop: top
            }, 1000);
            });
    </script>
</body>
</html>

@vommer · 10.03.2014, 11:13

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
 
$('a[href^="#"]').click(function(){
        var el = $(this).attr('href');
        $('body').animate({
            scrollTop: $(el).offset().top}, 2000);
        return false; 
});
    
});

@killlfun · 10.03.2014, 13:17 **[ТС]**

Заглянувший, vommer, спасибо.

@Ferym · 15.04.2015, 19:11

vommer, но этот скрипт не работает в Мозилле. Вот этот сайт сейчас делаю http://bulvar-plitka.by

Добавлено через 28 минут
Заглянувший, а ваш скрипт творит ахинею с менюшкой в сафари

@Fedor Vlasenko · 15.04.2015, 21:04

http://jsfiddle.net/vlasenkofedor/2St2g/

HTML5
1
2
3
4
5
6
7
8
9
10
11
<a name="top"></a>
<a href="#Gosha">Гоша</a>
<a href="#Petr">Петя</a>
<a href="#Igor">Игорь</a>
<hr/>
    <a name="Gosha">Гоша</a> <a href="#top">↑</a>
<div class="razd"></div>
    <a name="Petr">Петя</a> <a href="#top">↑</a>
<div class="razd"></div>
    <a name="Igor">Игорь</a> <a href="#top">↑</a>
<div class="razd"></div>

CSS
1
2
3
4
5
6
7
.razd{
    height: 600px;
}
a[href='#top']{
    text-decoration: none;
    color: red;
}

JavaScript
1
2
3
4
5
6
;(function($){
   $(document).on('click', 'a[href^=#]', function () {
        $('html, body').animate({ scrollTop:  $('a[name="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); 
        return false;
    });
})(jQuery);

@Sanches · 10.10.2015, 18:05

Всем привет.
А что, если ссылка имеет вид

HTML5
1
<a href="/#yakor"></a>

Т.е. в атрибуте href помимо решетки указан еще косой слэш. Что нужно изменить в коде скрипта?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
            $('a[href^="#"]').click(function () {
                elementClick = $(this).attr("href");
                destination = $(elementClick).offset().top;
                if($.browser.safari){
                    $('body').animate( { scrollTop: destination }, 1100 );
                }else{
                    $('html').animate( { scrollTop: destination }, 1100 );
                }
            return false;
            });
        });

Добавлено через 27 минут
Сам спросил - сам ответил!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
            $('a[href^="/#"]').click(function () {
                elementClick = $(this).attr("href");
                elementClick = elementClick.substr(1);
                destination = $(elementClick).offset().top - 53;
                if($.browser.safari){
                    $('body').animate( { scrollTop: destination }, 1100 );
                }else{
                    $('html').animate( { scrollTop: destination }, 1100 );
                }
            return false;
            });
        });

@Dribentsov · 12.12.2015, 22:21

Есть не плохое видео. Может поможет.
Как создать Jquery якорь "Плавная прокрутка страницы".
https://www.youtube.com/watch?v=Zi947g6YglY

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	10.03.2014, 13:17 [ТС]
	Заглянувший, vommer, спасибо. 1

@Ferym 0 / 0 / 0 Регистрация: 15.04.2015 Сообщений: 1
	15.04.2015, 19:11
	vommer, но этот скрипт не работает в Мозилле. Вот этот сайт сейчас делаю http://bulvar-plitka.by Добавлено через 28 минут Заглянувший, а ваш скрипт творит ахинею с менюшкой в сафари 0

@Dribentsov 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 4
	12.12.2015, 22:21
	Есть не плохое видео. Может поможет. Как создать Jquery якорь "Плавная прокрутка страницы". https://www.youtube.com/watch?v=Zi947g6YglY 0