Как учесть высоту header при переходе якоря?

365
16 июля 2017, 13:01

$(document).ready(function() { 
  $("#menu").on("click", "a", function(event) { 
    //отменяем стандартную обработку нажатия по ссылке 
    event.preventDefault(); 
 
    //забираем идентификатор бока с атрибута href 
    var id = $(this).attr('href'), 
 
      //узнаем высоту от начала страницы до блока на который ссылается якорь 
      top = $(id).offset().top; 
 
    //анимируем переход на расстояние - top за 1500 мс 
    $('body,html').animate({ 
      scrollTop: top 
    }, 1500); 
  }); 
});
body { 
  margin: 0; 
  font: normal 14px/130% arial, verdana; 
} 
 
a, 
a:hover { 
  color: #FFF; 
  text-decoration: none; 
} 
 
#wrapper { 
  padding-top: 150px; 
} 
 
#inner-wrapper { 
  width: 960px; 
  margin: 0 auto; 
} 
 
#header { 
  height: 150px; 
  width: 960px; 
  background: #069; 
  position: fixed; 
  top: 0; 
} 
 
#header h1 { 
  font-size: 32px; 
  line-height: 36px; 
  color: #FFF; 
  padding: 70px 0 0 30px; 
  margin: 0 0 14px; 
} 
 
#content { 
  min-height: 400px; 
  overflow: hidden; 
  padding: 20px 5%; 
  color: #000; 
  border: 1px solid #f0f0f0; 
  border-width: 0 1px 
} 
 
#footer { 
  background: #f0f0f0; 
  height: 25px; 
  color: #777; 
  padding: 10px; 
} 
 
#menu { 
  background: #000; 
} 
 
#menu>ul { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
} 
 
#menu>ul:after { 
  content: " "; 
  display: block; 
  line-height: 0; 
  height: 0; 
  width: 100%; 
  clear: both; 
} 
 
#menu>ul>li { 
  float: left; 
} 
 
#menu>ul>li+li { 
  margin-left: 5px; 
} 
 
#menu>ul>li>a { 
  display: block; 
  padding: 6px 12px; 
  color: #FFF; 
  -webkit-transition: all .3s; 
  -moz-transition: all .3s; 
  -ms-transition: all .3s; 
  -o-transition: all .3s; 
  transition: all .3s; 
} 
 
#menu>ul>li>a:hover { 
  background: #E76600; 
} 
 
.post { 
  width: 30%; 
  margin-right: 5%; 
  float: left; 
  text-align: justify; 
  cursor: pointer; 
} 
 
.post.last { 
  margin-right: 0; 
} 
 
.post .post-title { 
  text-transform: uppercase; 
} 
 
#ex2 .post, 
#ex3 .post, 
#ex4 .post { 
  width: 45%; 
  margin-right: 10%; 
} 
 
#ex2 .post.last, 
#ex3 .post.last, 
#ex4 .post.last { 
  margin-right: 0; 
} 
 
.separator { 
  clear: both; 
  overflow: hidden; 
  height: 50px; 
} 
 
@media only screen and (max-width:960px) { 
  #inner-wrapper { 
    width: 80%; 
  } 
} 
 
 
/* Back to top button */ 
 
#back-to-top { 
  position: fixed; 
  z-index: 999; 
  display: none; 
  bottom: 70px; 
  right: 15px; 
  cursor: pointer; 
} 
 
#back-to-top i { 
  width: 50px; 
  height: 50px; 
  display: block; 
  color: #fff; 
  background: #26ADE4; 
  text-align: center; 
  font-size: 16px; 
  line-height: 50px; 
  border-radius: 5px; 
  -webkit-transition: .3s all; 
  -moz-transition: .3s all; 
  -ms-transition: .3s all; 
  -o-transition: .3s all; 
  transition: .3s all; 
} 
 
#back-to-top i:hover { 
  background: #333; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!doctype html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Back to Top button</title> 
  <link rel="stylesheet" type="text/css" href="css/style.css"> 
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
  <script type="text/javascript" src="js/script.js"></script> 
</head> 
 
<body> 
  <div id="wrapper"> 
    <div id="inner-wrapper"> 
      <header id="header"> 
        <h1>WebComplex</h1> 
        <nav id="menu"> 
          <ul> 
            <li><a href="#ex1">Link #1</a></li> 
            <li><a href="#ex2">Link #2</a></li> 
            <li><a href="#ex3">Link #3</a></li> 
            <li><a href="#ex4">Link #4</a></li> 
          </ul> 
        </nav> 
      </header> 
      <div id="content"> 
        <section id="ex1"> 
          <h2>Block with ID="ex1"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
        <div class="separator"></div> 
        <section id="ex2"> 
          <h2>Block with ID="ex2"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
        <div class="separator"></div> 
        <section id="ex3"> 
          <h2>Block with ID="ex3"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
        <div class="separator"></div> 
        <section id="ex4"> 
          <h2>Block with ID="ex4"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
      </div> 
      <footer id="footer">WebComplex &copy 2014</footer> 
    </div> 
  </div> 
</body> 
 
</html>

Answer 1

$(document).ready(function() { 
  $("#menu").on("click", "a", function(event) { 
    //отменяем стандартную обработку нажатия по ссылке 
    event.preventDefault(); 
 
    //забираем идентификатор бока с атрибута href 
    var id = $(this).attr('href'), 
 
    // узнаем высоту header 
    offset = $('header').outerHeight(), 
     
      //узнаем высоту от начала страницы до блока на который ссылается якорь 
      top = $(id).offset().top - offset; 
 
    //анимируем переход на расстояние - top за 1500 мс 
    $('body,html').animate({ 
      scrollTop: top 
    }, 1500); 
  }); 
});
body { 
  margin: 0; 
  font: normal 14px/130% arial, verdana; 
} 
 
a, 
a:hover { 
  color: #FFF; 
  text-decoration: none; 
} 
 
#wrapper { 
  padding-top: 150px; 
} 
 
#inner-wrapper { 
  width: 960px; 
  margin: 0 auto; 
} 
 
#header { 
  height: 150px; 
  width: 960px; 
  background: #069; 
  position: fixed; 
  top: 0; 
} 
 
#header h1 { 
  font-size: 32px; 
  line-height: 36px; 
  color: #FFF; 
  padding: 70px 0 0 30px; 
  margin: 0 0 14px; 
} 
 
#content { 
  min-height: 400px; 
  overflow: hidden; 
  padding: 20px 5%; 
  color: #000; 
  border: 1px solid #f0f0f0; 
  border-width: 0 1px 
} 
 
#footer { 
  background: #f0f0f0; 
  height: 25px; 
  color: #777; 
  padding: 10px; 
} 
 
#menu { 
  background: #000; 
} 
 
#menu>ul { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
} 
 
#menu>ul:after { 
  content: " "; 
  display: block; 
  line-height: 0; 
  height: 0; 
  width: 100%; 
  clear: both; 
} 
 
#menu>ul>li { 
  float: left; 
} 
 
#menu>ul>li+li { 
  margin-left: 5px; 
} 
 
#menu>ul>li>a { 
  display: block; 
  padding: 6px 12px; 
  color: #FFF; 
  -webkit-transition: all .3s; 
  -moz-transition: all .3s; 
  -ms-transition: all .3s; 
  -o-transition: all .3s; 
  transition: all .3s; 
} 
 
#menu>ul>li>a:hover { 
  background: #E76600; 
} 
 
.post { 
  width: 30%; 
  margin-right: 5%; 
  float: left; 
  text-align: justify; 
  cursor: pointer; 
} 
 
.post.last { 
  margin-right: 0; 
} 
 
.post .post-title { 
  text-transform: uppercase; 
} 
 
#ex2 .post, 
#ex3 .post, 
#ex4 .post { 
  width: 45%; 
  margin-right: 10%; 
} 
 
#ex2 .post.last, 
#ex3 .post.last, 
#ex4 .post.last { 
  margin-right: 0; 
} 
 
.separator { 
  clear: both; 
  overflow: hidden; 
  height: 50px; 
} 
 
@media only screen and (max-width:960px) { 
  #inner-wrapper { 
    width: 80%; 
  } 
} 
 
 
/* Back to top button */ 
 
#back-to-top { 
  position: fixed; 
  z-index: 999; 
  display: none; 
  bottom: 70px; 
  right: 15px; 
  cursor: pointer; 
} 
 
#back-to-top i { 
  width: 50px; 
  height: 50px; 
  display: block; 
  color: #fff; 
  background: #26ADE4; 
  text-align: center; 
  font-size: 16px; 
  line-height: 50px; 
  border-radius: 5px; 
  -webkit-transition: .3s all; 
  -moz-transition: .3s all; 
  -ms-transition: .3s all; 
  -o-transition: .3s all; 
  transition: .3s all; 
} 
 
#back-to-top i:hover { 
  background: #333; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!doctype html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Back to Top button</title> 
  <link rel="stylesheet" type="text/css" href="css/style.css"> 
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
  <script type="text/javascript" src="js/script.js"></script> 
</head> 
 
<body> 
  <div id="wrapper"> 
    <div id="inner-wrapper"> 
      <header id="header"> 
        <h1>WebComplex</h1> 
        <nav id="menu"> 
          <ul> 
            <li><a href="#ex1">Link #1</a></li> 
            <li><a href="#ex2">Link #2</a></li> 
            <li><a href="#ex3">Link #3</a></li> 
            <li><a href="#ex4">Link #4</a></li> 
          </ul> 
        </nav> 
      </header> 
      <div id="content"> 
        <section id="ex1"> 
          <h2>Block with ID="ex1"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
        <div class="separator"></div> 
        <section id="ex2"> 
          <h2>Block with ID="ex2"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
        <div class="separator"></div> 
        <section id="ex3"> 
          <h2>Block with ID="ex3"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
        <div class="separator"></div> 
        <section id="ex4"> 
          <h2>Block with ID="ex4"</h2> 
          <article class="post"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
          <article class="post last"> 
            <h3 class="post-title">Post title</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </article> 
        </section> 
      </div> 
      <footer id="footer">WebComplex &copy 2014</footer> 
    </div> 
  </div> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
vue multilanguage. Смена языка по клику
javascript

vue multilanguage. Смена языка по клику

Товарищи, использую этот плагин, для перевода сайта на разные языкиВопрос: как добраться до this

 313
Uncaught TypeError: $ is not a function
javascript

Uncaught TypeError: $ is not a function

В консоли отладчика при попытке загрузить страницу появляется сообщение:

 227
cURL не отображает данные Adobe Muse и vk виджеты
PHP

cURL не отображает данные Adobe Muse и vk виджеты

Получаю с помощью cURL страницу, а она содержит виджет Adobe Muse и vk виджетПолучаю сообщение об ошибке:

 267
PHP Notice: Undefined variable
PHP

PHP Notice: Undefined variable

В этом произведении искусства ну никак разобраться не могу

 469