Scroll button Opcje

[RosheD]

Witam bardzo serdecznie 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
Z góry dziękuje za odpowiedzi

[timon27]

Generalnie to są dwa zadania:

1. zrobić scroll po akcji.
w javascript po akcji:

[HTML] pobierz, plaintext 
  window.scrollBy(0,50);
[HTML] pobierz, plaintext 

2. ukryć pasek
w css (w atrybutach body):

[HTML] pobierz, plaintext 
    overflow:hidden;
[HTML] pobierz, plaintext 

Ten post edytował timon27 10.10.2013, 19:42:14

[RosheD]

Aktualnie tak wygląda strona : http://anonymous-roshed.zz.mu/ Przycisk "how to use" zjeżdża... ale nie tak nisko jak powinien... pomysł? Wykorzystałem scrolldeck.js

Ten post edytował RosheD 10.10.2013, 20:03:28

[com]

masz tam przecież rozwiązanie to się na nim wzoruj http://www.distancetomars.com/js/scrolling.js btw u mnie w tym twoim demo nic nie zjeżdża

[RosheD]

Noo zauważyłem że skrypt z strony macierzystej działa wszędzie a jak go przerobiłem i wstawiłem na moją stronę to już działa tylko na firefoxie, nie chce typowego z distance ponieważ to prawa autorskie .
Aktualny jest dobry tylko co zrobić aby działał dla wszystkich tak jak teraz działa na firefoxie? Strona macierzysta : http://johnpolacek.github.io/scrolldeck.js/

@edit
Błąd leży gdzieś w css bo jak zmieniłem na ten z scrolldeck to działało jak powinno... Nie rozumiem o co tu chodzi każdy div classe itp mam dodaną do mojego css. Więc o co chodzi?

Ten post edytował RosheD 10.10.2013, 20:32:36

[com]

nie powiedziałem kopiuj wklej tylko napisz sam na podstawie tego ja korzystam z firefoxa i mi twoje demo nie działa...

[RosheD]

To dziwne. Dobra ale chyba coś "spłodziłem" mógł byś zobaczyć czy teraz działa ?

[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

[RosheD]

Jeżeli możesz to podaj mi Twój email bo może akurat weszłaś na stronę w momencie gdy robiłem coś i znów się rozsypało bo raczej na pewno wszystko działa

[com]

priv