jQuery(document).ready(function($) {
$('a[href^="#"]').click(function() {
elementClick = $(this).attr("href");
destination = $(elementClick).offset().top;
if ($.browser.safari) {
$('body').animate({
scrollTop: destination
}, 2000);
} else {
$('html').animate({
scrollTop: destination
}, 2000);
}
return false;
});
});
html,
body {
min-width: 100%;
max-width: 300%;
width: 100%;
min-height: 100%;
max-height: 300%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
a {
color: #000;
text-decoration: none;
border: 1px solid #000;
padding: 5px;
margin: 10px;
position: relative;
top: 20px;
font-size: 12px;
}
.container {
min-width: 100%;
max-width: 300%;
width: 100%;
min-height: 100%;
max-height: 300%;
height: 100%;
position: relative;
}
/**/
#a,
#b,
#c {
width: 100%;
height: 100%;
position: absolute;
}
#a {
left: 0;
top: 0;
background: #f00;
}
#b {
left: 100%;
top: 0;
background: #c01;
}
#c {
left: 200%;
top: 0;
background: #df0101;
}
/*center*/
#d,
#e,
#f {
width: 100%;
height: 100%;
position: absolute;
}
#d {
left: 0;
top: 100%;
background: yellow;
}
#e {
left: 100%;
top: 100%;
background: green;
}
#f {
left: 200%;
top: 100%;
background: lightblue;
}
/*bottom*/
#g,
#k,
#y {
width: 100%;
height: 100%;
position: absolute;
}
#g {
left: 0;
top: 200%;
background: grey;
}
#k {
left: 100%;
top: 200%;
background: darkgrey;
}
#y {
left: 200%;
top: 200%;
background: lightgrey;
}
#a:before {
content: "первая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#b:before {
content: "вторая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#c:before {
content: "третья страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#d:before {
content: "четвёртая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#e:before {
content: "пятая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#f:before {
content: "шестая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#g:before {
content: "седьмая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#k:before {
content: "восьмая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
#y:before {
content: "девятая страница";
position: absolute;
top: 50%;
left: 40%;
font-size: 50px;
color: transparent;
text-shadow: 0 0 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
<div class="top">
<div id="a">
<a href="#b">правее</a>
<a href="#d">ниже</a>
</div>
<div id="b">
<a href="#a">левее</a>
<a href="#e">ниже</a>
<a href="#c">правее</a>
</div>
<div id="c">
<a href="#b">левее</a>
<a href="#f">ниже</a>
</div>
<div id="d">
<a href="#a">выше</a>
<a href="#e">правее</a>
<a href="#f">правее</a>
</div>
<div id="e">
<a href="#d">левее</a>
<a href="#b">выше</a>
<a href="#f">правее</a>
<a href="#k">ниже</a>
</div>
<div id="f">
<a href="#c">выше</a>
<a href="#e">левее</a>
<a href="#y">ниже</a>
</div>
<div id="g">
<a href="#d">выше</a>
<a href="#k">правее</a>
</div>
<div id="k">
<a href="#g">левее</a>
<a href="#e">выше</a>
<a href="#y">правее</a>
</div>
<div id="y">
<a href="#f">выше</a>
<a href="#k">левее</a>
</div>
</div>
</div>
Написал html с большими полями, есть потребность сделать анимированный скролл до якорей, их 9, смысл в том, чтобы было видно куда переадресовывается ссылка. Страница устроена крест на крест и в каждой ячейке (подписано и придан цвет) переход был вверх или вправо, или вниз и куда угодно. Ссылки связаны с якорями, если будет анимированный скролл, то будет очень эффектно. Помогите с js.