Scroll button Opcje

[RosheD]

Witam bardzo serdecznie (IMG:style_emoticons/default/smile.gif) Czy mógł by mi ktoś pomóc,podać link do skryptu bo nie potrafie takowego znaleźć .
Więc poszukuje skryptu który po kliknięciu guzika będzie zjeżdżał na dół (tak wiem to bez problemu można znaleźć) ale żeby było widać suwaka na prawej stronie Tak jak to jest na distance to mars (IMG:style_emoticons/default/smile.gif)
Z góry dziękuje za odpowiedzi (IMG:style_emoticons/default/smile.gif)

[com]

nie działa spróbuj tak:

[HTML] pobierz, plaintext 
<div id="mainpage">
  <nav id="top">
    <h1>Webpage Title</h1>
    <ul id="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#about"><img src="img/about.png" alt="tekst alternatywny" /></a></li>
      <a href="#howtouse" class="nav-button" id="header">How to Use</a>
    </ul>
  </nav>
  </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {overflow:hidden;}
body { font-family: Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; background: #fff; color: #343434;  }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
 
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
 
h2 { font-size: 2.3em; line-height: 1.1em; font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif; color: #646464; font-weight: bold; margin-bottom: 12px; }
 
p { font-size: 1.4em; line-height: 1.25em; margin-bottom: 20px; color: #444; }
 
a.close { display: inline-block; background: #5574b4; padding: 10px 8px; color: #fff; font-weight: bold; font-size: 1.4em; text-decoration: none; margin-bottom: 6px; }
a.close:hover { background: #4a6397; }
 
#about { 
  display: block;
  width: 300px;
  background: #fff;
  padding: 10px 11px;
  padding-top: 35px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
 
#mainpage {
  width: 100%;
  height: 100%;
  display: block;
  background: #473d47 url('../img/tlo.jpg');
  min-height: 800px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  color: #fff;
}
 
#mainpage nav { 
  position: absolute;
  width: 100px; 
  min-height: 97%;
  padding: 0px 8px;
  padding-top: 220px;
}
#mainpage nav h1 {
  font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif;
  font-size: 2.85em;
  line-height: 1.3em;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 11px;
}
 
#navigation {
  list-style: none;
}
#navigation li { display: block; margin-bottom: 2px; font-size: 1.4em; font-weight: bold; }
#navigation li a { display: block; padding: 8px 6px; width: 100%; color: #d1e0f8; text-decoration: none; }
#navigation li a:hover, #navigation li a.open { color: #fff; opacity: 0.5; }
 
 
#content {
  display: block;
  margin-left: 200px;
  padding: 10px 15px;
 
}
 
#content p {
  color: #fff;
  text-shadow: 2px 1px 0px rgba(0,0,0,0.7);
}
 
#mainpage nav#top {
  position: absolute;
  height: 120px; 
  width: 100%;
  min-height: 120px;
  top: 0;
  text-align: center;
  padding: 20px 0px;
}
 
nav#top #navigation li {
  display: inline-block; 
  margin-right: 6px;
}
 
.fixed-btm { padding-bottom: 120px; /* add extra space when nav is fixed at the bottom */ }
 
.nav-button {
	padding: 10px;
	padding: 1rem;
	text-decoration: none;
	color: #959db5;
	font-size: 20px;
	font-size: 2rem;
	text-shadow: 0 -1px 1px #000;
	text-transform: uppercase;
	font-weight: bold;
	font-style: normal;
}
.current, a.nav-button:hover {
	color: #fff;
}
.slide {
	margin: 0 auto;
	width: 99%;
	padding: 120px 0;
	padding: 12rem 0;
	height: 40rem;
}
 
.pro-tip {
	display: block;
	padding: 20px;
	padding: 2rem;
	text-shadow: 0 1px 0 #fff;
}
 
code {
	font-style: normal;
	padding-left: 5px;
	padding-left: .5rem;
}
 
 
h1 {
	font-size: 180px;
	font-size: 18rem;
	margin: 0;
	text-shadow: 0 2px 1px #fff;
}
 
p {
	width: 80%;
	margin: 20px auto;
	margin: 2rem auto;
	text-shadow: 0 1px 1px #fff;
	line-height: 1.2;
}
 
a, a:visited {
	color: #1a4a6a;
	font-weight: bold;
	font-style: italic;
	text-shadow: none;
}
 
small {
	line-height: 1;
	font-style: italic;
	font-size: 20px;
	font-size: 2rem;
	text-shadow: 0 1px 0 #fff;
}
 
 
/* target screen width  */
@media (max-width: 1280px) {
	html {
		font-size: 10px;
	}
}
 
@media (max-width: 1160px) {
	html {
		font-size: 9px;
	}
}
 
@media (max-width: 1040px) {
	html {
		font-size: 8px;
	}
}
 
@media (max-width: 920px) {
	html {
		font-size: 7px;
	}
}
 
@media (max-width: 800px) {
	html {
		font-size: 6px;
	}
}
 
@media (max-width: 680px) {
	html {
		font-size: 5px;
	}
}
 
@media (max-width: 560px) {
	html {
		font-size: 4px;
	}
}
 
@media (max-width: 440px) {
	html {
		font-size: 3px;
	}
}
 
@media (max-width: 320px) {
	html {
		font-size: 3px;
	}
}
[CSS] pobierz, plaintext 

Ten post edytował com 10.10.2013, 22:05:26