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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Якорь</title>
<style>
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after { clear: both; }
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
padding: 15px 25px;
background-color: rgba(0,0,0,.75);
}
.nav-a {
color: #ffffff;
font-size: 20px;
line-height: 20px;
}
.nav-a a:hover { text-decoration: none; }
#navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#navbar li {
float: left;
}
#navbar li + li { margin-left: 25px; }
#main {
padding: 50px 25px;
}
</style>
</head>
<body>
<div id="navbar">
<ul class="clearfix">
<li><a class="nav-a" href="#ya1">Ссыдка 1</a></li>
<li><a class="nav-a" href="#ya2">Ссыдка 2</a></li>
<li><a class="nav-a" href="#ya3">Ссыдка 3</a></li>
<li><a class="nav-a" href="#ya4">Ссыдка 4</a></li>
</ul>
</div>
<div id="main">
<h2 id="ya1">Якорь 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam laboriosam veniam laborum repudiandae, modi velit. Tempora culpa in ratione, aspernatur, obcaecati enim quisquam dolorem, nobis adipisci voluptate mollitia dicta voluptatum. Inventore labore atque ipsa laudantium aliquid nulla enim voluptas deleniti itaque, quos, nesciunt, accusantium. Nemo sapiente dolorem, unde voluptates.</p>
<p>Tenetur, similique, delectus. Earum culpa, dolore esse perspiciatis accusamus ab magni temporibus velit omnis debitis! Velit omnis exercitationem, corporis recusandae rerum ducimus distinctio error laudantium maiores, perferendis quam sint iusto ipsum nobis officia. Accusamus quia nostrum dolorum non nihil, asperiores architecto perferendis fuga ullam suscipit, natus quisquam. Magnam, fugiat, libero.</p>
<p>Aspernatur alias vero non. Molestiae facilis tempore voluptatum repudiandae enim libero necessitatibus cumque odio esse numquam architecto ipsa at reprehenderit, fugit beatae rerum quo? Perspiciatis, possimus minus est debitis consequuntur reiciendis quas repudiandae facere commodi fugit officiis tempora, saepe asperiores hic! Quos, perferendis architecto aliquam inventore nam vero, aperiam. Excepturi?</p>
<p>Rem, sit consectetur nesciunt laborum temporibus maiores, ipsam voluptatem adipisci, fugit odio corporis praesentium. Vel doloribus cum ab debitis pariatur dicta molestias tenetur eveniet unde sed consequatur neque consectetur id, quaerat corrupti soluta eum iure quae aliquid, suscipit voluptatibus hic alias quas commodi. Commodi tempora veniam ipsa molestias animi deleniti.</p>
<p>Unde eius ipsum dolore dolorum consequuntur, provident, dolor excepturi similique optio consequatur voluptates voluptate ipsam corporis repellat veritatis? Eius consequuntur molestias, harum, officiis, quasi ullam voluptas quaerat et odit ad nihil quam aspernatur recusandae natus, ab commodi nisi earum eligendi modi voluptatibus eaque quas. Inventore illo, possimus iure ab et.</p>
<p>Maxime tenetur, ad sit, accusantium qui illum. Reiciendis, expedita numquam. Laborum dolorum ipsum delectus est recusandae ipsa eius velit ipsam at deserunt enim natus beatae vel quod nesciunt rem consequuntur, corporis in voluptate voluptas excepturi temporibus itaque perferendis iure. Quas perspiciatis tempora maxime in quo aspernatur ullam nulla dolores delectus.</p>
<h2 id="ya2">Якорь 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloremque ex, cum itaque veniam, dolorem, accusamus ullam beatae in nisi officiis minima maxime id. Deserunt temporibus maiores ad, inventore impedit laborum eum soluta nemo quasi delectus nam unde molestiae amet architecto a, fugiat voluptatibus voluptas atque modi placeat tempore tempora!</p>
<p>Voluptates expedita magni harum inventore quaerat soluta, nam nisi veritatis labore facilis corrupti numquam recusandae nostrum tenetur, quam dignissimos, similique provident assumenda aut ea, perspiciatis possimus vel iste. Deserunt fuga commodi aspernatur, quas atque nihil earum voluptatum, nemo nisi dolorum et obcaecati nam non possimus soluta est animi ut quidem?</p>
<p>Quasi quam excepturi placeat laborum ab sapiente odio ad perspiciatis eum. Perspiciatis magnam voluptas iste, non, maiores sit asperiores ea iure et quae soluta consectetur fugiat, tempore quaerat officiis natus sint nobis delectus! Nemo provident ipsum id at tempora suscipit enim temporibus, laboriosam similique necessitatibus cum nulla repellat voluptatum aut.</p>
<p>Ratione vitae veritatis, culpa atque cupiditate repellendus distinctio consequuntur aspernatur sapiente ipsam iure tenetur in, illo id quod repellat libero quia perferendis dicta neque! Nostrum, delectus, consectetur, recusandae, ratione cum nihil tempore repudiandae voluptas impedit iure similique nesciunt saepe atque quam possimus cumque non alias corporis numquam aliquid dignissimos eos.</p>
<p>Recusandae in repellat voluptatum maxime corporis iste laboriosam quibusdam beatae a reprehenderit eos voluptas temporibus dicta assumenda vero vitae facere quae voluptate excepturi eligendi, at adipisci, voluptates ex. Esse libero iusto quod maxime praesentium sequi repellendus velit ab quae, ratione! Iste impedit, reprehenderit nisi nemo est aliquid deleniti voluptate sunt.</p>
<p>Possimus hic quasi et neque maiores ut illo, officiis animi necessitatibus beatae doloremque voluptatum inventore magni impedit veritatis quae deleniti cum ex minus odit quibusdam. Facere dicta deleniti ut, corporis dignissimos vel, veniam animi dolor repellat minima est ab velit sint provident minus nam nisi reprehenderit ipsam quaerat delectus dolorem.</p>
<h2 id="ya3">Якорь 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ipsa beatae excepturi fugit quo error ipsam quidem voluptatibus, expedita natus aspernatur accusantium labore doloribus quae nesciunt, omnis deserunt est, libero debitis. Illo minus reiciendis eius! Fugiat repudiandae tempora, provident temporibus animi dicta quos, vel ex velit ad saepe perspiciatis consequatur.</p>
<p>Ut nesciunt, explicabo ipsa numquam suscipit voluptatum eum optio, quas tempora totam soluta atque, necessitatibus amet blanditiis illum magnam quam iusto. Ea ut, quod error, dolore at autem. Earum voluptatibus, repellendus impedit. Beatae, repellendus natus nemo, numquam eos incidunt ullam, quod delectus consequuntur obcaecati voluptates, voluptate facilis eligendi totam iste!</p>
<p>Illum nesciunt, quaerat! Consequatur, ullam ex reprehenderit qui nulla ab quis modi cupiditate a amet repudiandae illum rerum sapiente, maxime laborum eius adipisci laudantium debitis hic eos. Itaque, obcaecati inventore, accusantium voluptates provident sequi enim labore repellat accusamus id iusto illo earum porro laudantium quia iure voluptatibus magni aliquid in!</p>
<p>Veniam aliquam quisquam, cumque veritatis corrupti praesentium dolor beatae earum expedita fuga deserunt quae nulla voluptatibus quo velit, voluptas quod consequatur, aliquid architecto necessitatibus soluta omnis dolore enim. Ad neque ducimus rerum. Magnam incidunt reiciendis maiores, laboriosam fuga sit facilis ratione aliquam laudantium, neque eaque! Est sunt aut, natus culpa.</p>
<p>Dolores ab consectetur, odit placeat, tempora ea quia, doloribus expedita consequuntur veniam suscipit dicta sunt ducimus beatae ut in sapiente excepturi! Debitis architecto assumenda ratione molestias porro minus magni error, quos aliquam itaque. Accusantium quaerat nobis molestias accusamus tempore vel alias quis impedit. Dolores mollitia maxime tempora reprehenderit, veniam tempore.</p>
<p>Nulla dolorem delectus, corporis quia rem inventore quaerat similique explicabo deserunt facere, eveniet neque dolores, veniam eaque reiciendis autem suscipit aliquam. Quod quidem maxime dicta, ullam, error quam tempora omnis dignissimos natus illo facilis ut iusto totam numquam ipsum voluptatibus voluptas doloremque sunt. Suscipit eos optio eligendi, autem dolores, necessitatibus.</p>
<h2 id="ya4">Якорь 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur nesciunt blanditiis error impedit numquam vitae ullam magnam cupiditate ratione consequatur recusandae expedita, ipsam quisquam necessitatibus, iste fugiat animi quaerat alias perferendis. Ipsum autem nostrum voluptas iure minima eius laboriosam aspernatur corrupti quae tempore dignissimos pariatur odio harum cupiditate, dolorum similique!</p>
<p>Libero, soluta cumque beatae esse eos quos non vero cupiditate, nemo blanditiis, mollitia corrupti odio voluptas molestiae veritatis a adipisci corporis dicta facilis nam tempore! Ducimus architecto consequatur distinctio corrupti odit officiis alias nobis molestias odio? Labore non quasi, eligendi placeat obcaecati quia, ratione, delectus facere nulla, odit minus laborum!</p>
<p>Quia magnam vel, mollitia adipisci sequi autem id ipsa exercitationem iure totam quod harum laborum assumenda deserunt ullam nesciunt aspernatur dignissimos iusto est hic beatae libero quam voluptates perspiciatis? Ullam aliquid itaque, cumque quibusdam, ipsa consequatur, ipsum corporis distinctio minima, similique sed architecto ad pariatur ratione officiis provident perspiciatis quas!</p>
<p>Sint iste magnam atque minus reiciendis, vitae fugiat, fugit autem cum aliquid cupiditate ex, ab optio dignissimos minima eius quas quaerat, animi. Iste assumenda illum dolorem rem, quam iure accusamus deserunt nam, quis sit excepturi itaque dolore tenetur, labore aut voluptatum commodi. Quo, quis, itaque. Delectus quibusdam perferendis harum impedit?</p>
<p>Harum nihil minus possimus, omnis dicta pariatur tempore aliquam nostrum iste distinctio repellat error maiores dignissimos perferendis ratione quod, amet vero, itaque quasi dolor consectetur. Aut modi fugiat cumque doloribus eaque ducimus, id dolorum similique unde soluta quod, numquam error autem laborum cum aliquid qui hic sed inventore cupiditate, distinctio?</p>
<p>Nihil pariatur aspernatur quidem quasi ea eaque inventore doloribus sunt, perspiciatis, et, ab facilis, consequatur officiis itaque? Illum iure recusandae sint porro odit perferendis tenetur velit illo saepe placeat, aliquam adipisci, mollitia aperiam quam, eos quasi ipsum cupiditate quidem fugiat maxime doloribus optio, libero asperiores ducimus. Nisi necessitatibus, nulla consectetur.</p>
</div>
<script src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
//установка обработчика клика по ссылкам навигации
$('.nav-a').click(function(){
var $yakor = $($(this).attr('href'));
//50 - высота navbar, можно и её кстати в скрипте посчитать
$(window).scrollTop($yakor.offset().top-50);
return false;
});
});
</script>
</body>
</html> |
(
Видимо из-за того, что у меня через скрипт это работает (плавно/быстро переходит к идентификатору)
