deadhunter,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>разрез фона</title>
<style>
header {
background-image: url(http://www.entheosweb.com/images/backgrounds/blue/lines.jpg);
background-repeat: none;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: red;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px
}
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px
}
header .intro-text .intro-heading {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px
}
@media (min-width:768px) {
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px
}
}
.block{
display: none;
height: 300px;
background-color: #FFFFFF;
}
.arrow-down.open img:nth-child(1), .arrow-down img:nth-child(2) {
display: none;
}
.arrow-down.open img:nth-child(2), .arrow-down img:nth-child(1) {
display: inline-block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
}(jQuery));
$(function() {
var $a = $(".arrow-down"),
$b = $(".arrow-down + div");
$a.each(function(indx, el) {
el = $(el);
el.on("click", function(event) {
event.preventDefault();
var next = el.next()
$b.stop(true,true).not(next.slideToggle(800,function() {
next.scrollTo(800)
})).slideUp(800);
$a.not(el.toggleClass("open")).removeClass("open");
})
})
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">первая секция</div>
<a href="#"class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png">
</a>
<div class="block">1</div>
<div class="intro-lead-in">вторая секция</div>
<a href="#"class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png">
</a>
<div class="block">2</div>
<div class="intro-lead-in">третья секция</div>
<a href="#"class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png">
</a>
<div class="block">3</div>
</div>
</div>
</header>
</body>
</html>
