Skip to content

Instantly share code, notes, and snippets.

@kharakhordindemo

kharakhordindemo/index.html

Created December 6, 2017 14:55
Show Gist options
  • Save kharakhordindemo/c00772d15f6657bdb2ea0012df8a278b to your computer and use it in GitHub Desktop.
Save kharakhordindemo/c00772d15f6657bdb2ea0012df8a278b to your computer and use it in GitHub Desktop.
Download ZIP
Плавная прокрутка по якорям
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Плавная прокрутка по якорям</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="anchor-list">
<li class="anchor-list__item">
<a href="#about" class="anchor-list__link" data-target="anchor">about</a>
</li>
<li class="anchor-list__item">
<a href="#portfolio" class="anchor-list__link" data-target="anchor">portfolio</a>
</li>
<li class="anchor-list__item">
<a href="#contacts" class="anchor-list__link" data-target="anchor">contacts</a>
</li>
<li class="anchor-list__item">
<a href="#map" class="anchor-list__link" data-target="anchor">map</a>
</li>
</ul>
<main class="content">
<div class="wrapper">
<section class="about" id="about">
<h2>about</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit voluptate error, ducimus perspiciatis! Rerum, saepe explicabo molestiae labore perspiciatis architecto natus obcaecati accusantium! Cumque ipsum eius voluptates. Voluptates deleniti esse magni, ab, consequatur aspernatur vel corporis illo cum molestias ea quidem, nisi. Temporibus alias sequi repudiandae doloremque minima atque molestias soluta veniam, similique fugit quisquam quia perspiciatis ullam adipisci iusto neque consectetur harum! Totam impedit, dicta quia iusto blanditiis non quis facilis aliquam minima perferendis id quas omnis commodi consequuntur officiis, repellat distinctio molestias nostrum excepturi sapiente provident veritatis veniam accusamus quae! Eos aperiam nulla consectetur ullam ratione, vitae porro ipsum! Rerum odit ipsa alias, repudiandae ea non, itaque expedita veniam cupiditate facere totam voluptas sint delectus reiciendis provident numquam accusamus harum a modi, laboriosam dicta impedit! Sunt officia omnis error dolore dolores enim nobis similique maiores recusandae delectus voluptatibus sed ea nulla magni id a, cupiditate ipsam iure? Obcaecati nemo officia nesciunt quia sint aspernatur porro in veniam harum inventore iusto molestiae nihil, modi incidunt, minus impedit sequi libero! Aspernatur delectus autem cupiditate optio possimus quia laboriosam culpa veniam repellendus a, enim cumque iste, dolore doloribus ad dolores eum alias recusandae atque porro, et maiores. Neque, eaque laudantium error?
</section>
<section class="portfolio" id="portfolio">
<h2>portfolio</h2>Ad voluptates esse officiis quam harum, recusandae placeat, nisi, non quisquam odit aut, beatae rerum maiores inventore distinctio sed perferendis fuga facilis. Officiis, maxime! Nulla necessitatibus dolor consequatur vitae, fuga vero maxime, nemo amet iure culpa tempora? Est mollitia, dolorum sapiente inventore dolores fuga obcaecati laboriosam, fugiat eius iste, nesciunt tenetur cupiditate nostrum error ratione odit porro distinctio repellat quo doloribus! Assumenda cum repudiandae eligendi doloremque facere aspernatur, fugiat natus incidunt. Facere sapiente neque at rem ea cumque dolorum consequatur, eos animi ut, saepe eligendi fugit tempora asperiores perspiciatis similique libero tenetur enim quisquam quos laudantium ratione accusantium officiis ipsam! Pariatur, labore. Sequi consequuntur, doloremque itaque asperiores, quidem impedit, magnam velit sed error, nesciunt porro illum? Ullam magnam corporis esse fuga eum molestiae, sed, eos dolor voluptatem quas dignissimos aliquam, officia inventore enim modi sapiente aperiam incidunt quis. Debitis, iste. Alias sapiente beatae earum cupiditate illum dignissimos, doloribus, placeat incidunt facere! Laboriosam harum eum sit, dolorem quos consectetur sed ullam dolores labore in, dignissimos ipsa et quibusdam totam quisquam vitae eligendi! Placeat iure, rerum similique aut. Voluptas libero mollitia nemo ipsam delectus earum saepe deserunt eum harum cupiditate reprehenderit doloremque, itaque quibusdam quae. Cumque reprehenderit, alias molestiae id ipsa necessitatibus.
</section>
<section class="contacts" id="contacts">
<h2>contacts</h2>Veniam laudantium, voluptatum repellendus consequatur quas debitis eligendi. Asperiores, recusandae. Reprehenderit deleniti magnam eum dolores explicabo recusandae, totam sed culpa libero, optio natus? Qui illum odio dolorum quia vero praesentium maiores modi! Aliquam, qui, suscipit. Error veritatis corrupti nam repellat ipsum eum, eveniet, officia magnam repudiandae dolor distinctio placeat nihil, itaque ab possimus deserunt unde quaerat. Consectetur eligendi, nostrum facilis, aliquam libero illo iusto voluptatem, suscipit delectus in fugiat voluptates officia animi veniam expedita vitae quidem adipisci. Laboriosam placeat beatae, omnis amet nam, temporibus fuga ut corporis accusantium, quae enim modi ipsum! Quas sed, ex doloribus voluptatibus delectus dolorum tenetur, exercitationem cum vero, enim iste quod totam nostrum fugit pariatur ipsam nam! Quae illo ea veritatis corporis sit consectetur expedita reiciendis, repellat ex, perferendis ratione, modi eius maxime inventore voluptatibus laudantium est sint eligendi. Rerum dolor doloremque est reiciendis dolorum vel numquam alias quia quo ipsam debitis magnam nisi ex iusto distinctio, cumque repudiandae ab accusamus sit saepe eligendi minus doloribus sapiente. Pariatur nam reprehenderit sunt, alias nisi atque praesentium qui nulla quae ut possimus ullam earum ab quaerat! Dolorem totam quae itaque eos officiis accusamus ad rerum. Modi reprehenderit excepturi optio quam hic, quod dolores nemo, beatae officiis officia?
</section>
<section class="map" id="map">
<h2>map</h2>Ipsum omnis ea quod corporis, ad quibusdam beatae maiores excepturi, exercitationem nostrum! Vitae minima repellendus sapiente officia consequatur ut aliquid ducimus, tempore veniam est sint inventore veritatis velit quibusdam nesciunt, fugiat distinctio iste eveniet optio sequi error eligendi. Nisi eum nobis, officia esse facere dolores fuga laborum ex beatae dolorum eos ipsam quia, a inventore ipsum id deleniti vero sapiente neque aliquid quod cum laudantium minima! Aut a debitis beatae reprehenderit quae eligendi, nesciunt minima optio similique, sapiente sequi at pariatur porro quod consequuntur explicabo modi. Sunt eius repellendus explicabo dolorum aperiam ad accusamus ullam iste omnis quam consequuntur minima qui error totam distinctio eum dicta dolorem aliquid beatae deserunt, soluta delectus iure. Voluptates illum sed, incidunt quae similique doloremque illo! Delectus, sequi placeat aperiam dolore illo dolorum nisi sapiente neque asperiores vero error saepe nam earum, beatae fugiat maiores tempore commodi sit. Ipsum magnam quibusdam, totam suscipit a nisi necessitatibus voluptatibus quia sed libero molestias amet sunt ad. Porro dolore adipisci facere voluptas, atque repellat, officiis eaque obcaecati, dolorem ab iusto, tenetur error quibusdam assumenda laudantium non ratione sed fugiat ipsum iste nostrum. Dolores pariatur in, placeat veritatis accusamus beatae veniam sapiente dolorem maxime dolore eos, nihil dolorum fugiat.
</section>
</div><!--wrapper-->
</main>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('a[data-target^="anchor"]').on('click', function(event) {
event.preventDefault();
var target = $(this).attr('href'),
bl_top = $(target).offset().top - 73;//вычитаем высоту блока меню
$('body, html').animate({scrollTop: bl_top}, 1000);
});//end on
});//end ready
</script>
</body>
</html>
Raw
style.css
/*---Сброс стилей---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate; border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong,b{
font-weight:bold
}
em{
font-style:italic
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
*{
box-sizing: border-box;
}
/*---Конец сброса стилей---*/
/*---Плавная прокрутка по якорям---*/
body{
padding-top: 70px;
font-family: "Arial", sans-serif;
}
.wrapper{
min-width: 320px;
margin: 0 auto;
position: relative;
}
h2{
margin-bottom: 40px;
font-size: 50px;
font-weight: bold;
line-height: 60px;
text-align: center;
text-transform: uppercase;
}
.content{
width: 100%;
min-width: 320px;
text-align: left;
}
section{
height: 700px;
padding: 50px;
}
.about{
background: #f0f08e;
}
.portfolio{
background: #ef4747;
}
.contacts{
background: #292929;
color: #fff;
}
.map{
background: #b6d1dd;
}
.anchor-list{
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
list-style: none;
padding: 20px;
text-align: center;
background: #d6d6d6;
}
.anchor-list__item{
display: inline-block;
padding: 5px 20px;
}
.anchor-list__link{
display: block;
font-size: 20px;
font-weight: bold;
text-decoration: none;
color: #000;
text-transform: uppercase;
transition: all 0.5s;
}
.anchor-list__link:hover{
color: #5f5f5f;
}
/*---Плавная прокрутка по якорям конец---*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment