Animated Scroll Up and Down

Hier gibt es allerlei Snippets zu finden

Animated Scroll Up and Down

Beitragvon Nashra » Mi 24. Okt 2012, 14:40

Zeigt rechts neben dem Forum zwei Buttons an zum rauf und runter scrollen (animiert).

Demo: Aussie Jack

Öffne: styles/prosilver/template/overall_header.html
Finde Dies kann auch nur ein Teil einer ganzen Zeile sein
Code: Alles auswählen
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>

Danach einfügen In einer neuen leeren Zeile danach einfügen
Code: Alles auswählen
<script type="text/javascript" src="{ROOT_PATH}jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}jquery/scroll-startstop.events.jquery.js"></script>

Finde Dies kann auch nur ein Teil einer ganzen Zeile sein
Code: Alles auswählen
<div id="wrap"

Danach einfügen In einer neuen leeren Zeile danach einfügen
Code: Alles auswählen
<div title="Top" id="nav_up" class="nav_up" style="opacity: 1;"></div>
<
div title="Down" id="nav_down" class="nav_down" style="opacity: 1;"></div>
<
script type="text/javascript">
$(function()
 {
// the element inside of which we want to scroll
var $elem = $('#wrap');
// show the buttons
$('#nav_up').fadeIn('slow');
$(
'#nav_down').fadeIn('slow');
// whenever we scroll fade out both buttons
$(window).bind('scrollstart', function(){
$(
'#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
// ... and whenever we stop scrolling fade in both buttons
$(window).bind('scrollstop', function(){
$(
'#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
// clicking the "down" button will make the page scroll to the $elem's height
$('#nav_down').click(
function (e) {
$(
'html, body').animate({scrollTop: $elem.height()}, 800);
}
);
// clicking the "up" button will make the page scroll to the top of the page
$('#nav_up').click(
function (e) {
$(
'html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>


Öffne: styles/prosilver/theme/common.css
Am Ende der Datei einfügen
Code: Alles auswählen
.nav_up{
     padding:0px;
     background-color: white;
     border:1px solid #0076B1;
     position:fixed;
     background:transparent url("{T_THEME_PATH}/images/arrow_up.png") no-repeat top left;
     background-position:50% 50%;
     width:24px;
     height:24px;
     bottom:435px;
     opacity:0.7;
     right:10px;
     white-space:nowrap;
     cursor: pointer;
     -moz-border-radius: 3px 3px 3px 3px;
         -webkit-border-radius: 3px 3px 3px 3px;
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 }
 .nav_down{
     padding:0px;
     background-color: white;
     border:1px solid #0076B1;
     position:fixed;
     background:transparent url("{T_THEME_PATH}/images/arrow_down.png") no-repeat top left;
     background-position:50% 50%;
     width:24px;
     height:24px;
     bottom:400px;
     opacity:0.7;
     right:10px;
     white-space:nowrap;
     cursor: pointer;
     -moz-border-radius: 3px 3px 3px 3px;
         -webkit-border-radius: 3px 3px 3px 3px;
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
animated_scroll_up_down.zip
(34.73 KiB) 101-mal heruntergeladen
Nashra
Kein Support per PN/E-Mail usw.
Allround-phpBB.de
Benutzeravatar
Nashra
Administrator
Beiträge: 1314
Themen: 163
Registriert: 11.10.2012
Wohnort: Wankum
Danke gegeben: 13
Danke bekommen:
115 mal in 93 Beiträgen
Vorname: Ralf
phpBB.de: FRvN
phpBB.com: Nashra

Zurück zu Snippets



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


x-Achse: 0
y-Achse: 0
cron