Witam,
Jak uzyskać efekt pojawienia się przycisku tkz. do góry po przejechaniu danej wartości scrollem ?
i jak taki przycisk wykonać ? samym html i odnośnik do diva ? czy skrypt ?
Proszę o pomoc,
Pozdrawiam.
Witam,
Jak uzyskać efekt pojawienia się przycisku tkz. do góry po przejechaniu danej wartości scrollem ?
i jak taki przycisk wykonać ? samym html i odnośnik do diva ? czy skrypt ?
Proszę o pomoc,
Pozdrawiam.
może tobie chodzi o skróty klawiszowe jak tak to łap http://www.dobreprogramy.pl/deepone/Skr … 21684.html
nie, nie chodziło mi o skróty.
Już tłumaczę o co dokładnie.
Mam stronę która jest ‘wysoka’ i np. tak jak tutaj http://live99.pl
po prawej na dole jest przycisk do góry.
Jak zrobić taki przycisk, ale żeby pojawiał się dopiero po zjechaniu w dół scrollem o określoną wartość pixeli.
Witaj
Zapewne chodzi ci o to:
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
Dziękuję bardzo o to dokładnie chodziło.
To rozwiązanie wydaje mi się najlepsze, ponieważ jest to przesuwanie płynne, w necie są również inne, ale te zazwyczaj bazują na “skoku” bezpośrednio do góry.
jeszcze tylko muszę zaimplementować to do swojej strony, ale myślę, że z tym nie będzie problemu.
a co do rozwiązania to tak, jest bardzo dobre.
Obrazek “do góry” musisz w pliku scrolltopcontrol.js podać mu odpowiednią ścieżkę aby został poprawnie wyświetlony, dokładnie chodzi o tą linijkę"
controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"[/code]
a wyskoość od której ma się pojawić ten obrazek w linijce powyżej, którą zapisałem wyżej dokładnie to tu :
[code]startline:100,
Aż tyle kodu, by przewinąć stronę do góry??? Niesamowici ci programiści są ;]. Moje jest prostsze: http://freedots.home.pl/_testy/gts_last/ Jak ktoś zainteresowany, mogę udostępnić kod :).
Jest coś takiego, jak etykieta:
opis odsyłacza
(...)
(opis etykiety)[/code]
Sądzę, że z powodzeniem można stosować to rozwiązanie, wystarczy jedynie podlinkować sobie na dole jakąś grafikę, np. ze strzałką.
Moje rozwiązanie jest mniej więcej takie:
JS
function scrollTo(el, dly)
{
var wsTop = jQuery(window).scrollTop();
var epTop = 0;
var elTop = 0;
var dly = Number(dly) ? dly : 0;
var div = jQuery(document).height() > jQuery(window).height() ? Math.ceil(jQuery(document).height()/jQuery(window).height()) : 1;
var tme = 1024/div;
/* Jeśli nie używamy LightBox, można ten kod usunąć */
var oLb = document.getElementById('lightbox');
if (oLb && (jQuery(oLb).css('display') != "none") && (typeof myLightbox != "undefined"))
{
myLightbox.end();
}
if (el != "undefined")
{
epTop = Math.ceil(jQuery(el).position().top);
elTop = (epTop>13) ? epTop-13 : 0;
}
if (wsTop || elTop)
{
jQuery('html,body').delay(dly).animate(
{
scrollTop: elTop ? (elTop-(wsTop ? 1 : 0)) : 0
}, tme, 'easeOutQuint'); // Potrzebny plik `jquery.easing.1.3.js`
}
}
var eS = 0;
jQuery(document).ready(function(){
eS = (eID = window.location.hash.replace('#', '')) ? document.getElementById(eID) : 0;
if (eS)
{
jQuery('html,body').delay(0).animate({
scrollTop: 0
}, 0);
}
dBP = document.createElement('p');
jQuery(dBP).attr({'id': "skip_t"}).css('display', "none").html('Góra ↑').appendTo('body');
jQuery(window).scroll(function () {
if ((jQuery(dBP).css('display') == "none") && (jQuery(this).scrollTop() > 0))
{
jQuery(dBP).delay(0).fadeTo(192, 1);
}
else if ((jQuery(dBP).css('display') != "none") && (jQuery(this).scrollTop() < 1))
{
jQuery(dBP).delay(0).fadeOut(192);
}
});
jQuery('a[rel=top]').click(function () {
scrollTo(document.body);
return false;
});
jQuery('a[href^=#]').click(function (){
var hsh = this.hash.replace('#', '');
if (hsh && (el = document.getElementById(hsh)))
{
scrollTo(el);
return false;
}
else
{
scrollTo(document.body);
return false;
}
});
});
jQuery(window).load(function(){
if (eS)
{
// Należy pwtórzyć tę część kodu, ponieważ czasem dzieją się cuda :D
jQuery('html,body').delay(0).animate({
scrollTop: 0
}, 0);
scrollTo(eS, 192);
}
});
CSS
#skip_t {
margin: 0;
/*
dowolny CSS wg swojego widzi mi się ;P
*/
position: fixed;
right: 0.5em;
bottom: 0.5em;
}
Ehm, ja bym to zrobił tak:
$(document).ready(function(){
$('.upButton').css('display','none');
$(document).scroll(function(){
$(document).scrollTop()>$(window).height()+100?$('.upButton').css('display','block'):$('.upButton').css('display','none');
});
});
Gdzie class=“upButton” to jakiś link etc z kotwicą. A do tego jeszcze przed ostatnim }); dać:
$('.upButton').click(function{
$('body').animate({scrollTop : 0},'slow');
});
I dzięki temu mamy kotwicę dla wyłączonego js’a, oraz animate dla włączonego. Kod jest krótszy niż połowa tego wyżej
Oczywiście możesz też zamienić .css(‘display’,‘none’), oraz .css(‘display’,‘block’) odpowiednio na .hide(), oraz .show() Dzięki temu będziesz miał również animację pojawiającego się przycisku
@drobok. Przedstawiłeś tylko mniejszą część całości. A gdzie click() po którym nastąpi przewinięcie strony na górę? A gdzie jest możliwość przewijania do dowolnego elementu strony? A czemu twój kod nie ma prawa działać poza pojawianiem się i znikaniem ‘.upButton’? Itp., itd. Jak się zastanowisz, to i kod Ci się rozrośnie :D. Oczywiście można jeszcze zminimalizować kod do niezbędnego minimum, np. zrezygnować z tworzenia poprzez jQuery “buttona” i zamieszczenie go bezpośrednio w HTML, ale kodu JS za wiele nie zmniejszysz :).
PS.
Przy stosowaniu animacji (hide, show itp.) musisz zastosować “zatrzask”, czyli sprawdzić jaki ‘display’ ma button, bo ci animacja zgłupieje. Raz Ci się button pojawi, raz nie. Sprawdź, a się przekonasz ;). Dlatego uważam, że mój kod ma wszystko co niezbędne. Można jedynie rozszerzyć możliwości o jakieś tam elementy :).
Jeśli dodasz wszystko przez js bez js funkcja nie ma prawa działać. Kod miał dotyczyć przewijania do góry, więc nie ma sensu dodawać dodatkowych funkcjonalności.
Całość powinna działać z kotwicą pokazaną przez poprzednika. Animate ma click (wiem z początku o nim zapomniałem, lecz później został dodany).
@ps, wiem, dlatego początkowo mamy zmianę display
Nie będzie działać :). Wiesz czemu? Temu, że na ‘body’ funkcja animate({scrollTop: 0}, …) nie zadziała we wszystkich przeglądarkach. Poprawnie jest:
$('html,body').animate({scrollTop : 0},'slow');
Poza tym co masz na myśli pisząc - “Całość powinna działać z kotwicą pokazaną przez poprzednika”? Niby jak ma działać jeśli Twój skrypt tego nie uwzględnia ;>? Nie kombinuj już :D. Nad swoim skryptem nie siedziałem 5 minut, jest ok :).