MyBB.de Forum
Jump to Bottom - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Jump to Bottom (/thread-32181.html)

Seiten: Seiten: 1 2

Jump to Bottom - hkkp - 04.06.2015

Hallo,

wäre es für jemanden möglich, dieses Tutorial so umzuschreiben, dass es eben nach unten springt.

vielen dank!

RE: Jump to Bottom - StefanT - 04.06.2015

Vielleicht hilft dir dies weiter: http://stackoverflow.com/questions/1890995/jquery-scroll-to-bottom-of-page-iframe/5909328#5909328

RE: Jump to Bottom - hkkp - 04.06.2015

Code:
jQuery(function($) {
$("#bottom").hide();
$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});
});

ist das falsch?

RE: Jump to Bottom - StefanT - 04.06.2015

Das ist nicht der Code auf den ich verlinkt haben (2. Antwort). Eigentlich musst du auch nur den Wert bei scrollTop anpassen.

RE: Jump to Bottom - hkkp - 04.06.2015

ja und wo mach ich dann den rein und ich wollte eigentlich dann auch so ein icon, wie bei dem von mir verlinkten tutorial haben, auch das er versteckt ist, wenn man runterscrollt...

RE: Jump to Bottom - hkkp - 05.06.2015

PHP-Code:
<div id='backdown'>
<a class='go-down' href='#down' title='Nach unten'><img src="{$theme['imgdir']}/backtodown.png" /></a>
</div>
<script type="text/javascript">
jQuery(function($) {
  $(window).scroll(function ();
  $('.go-down').click(function () {
    $('html, body')({ 
   scrollTop: $(document).height()-$(window).height()},    
   "easeOutQuint"
);
    return false;
  });
});
</script> 

funktioniert nicht. ist alles im header... grübel

RE: Jump to Bottom - StefanT - 05.06.2015

Bei der Zeile fehlt irgendwas, da werden Klammern geöffnet und nirgends geschlossen:
Code:
$(window).scroll(function ();


RE: Jump to Bottom - hkkp - 05.06.2015

das in den header:

PHP-Code:
<div id='backdown'>
<a class='go-down' href='#down' title='Nach unten'><img src="{$theme['imgdir']}/backtodown.png" /></a>
</div>
<script type="text/javascript">
jQuery(function($) {
  $(window).scroll(function () > 400))
  $('.go-down').click(function () {
    $('html, body')({ 
   scrollTop: $(document).height()-$(window).height()
    },    
   "easeOutQuint"
);
    return false;
  });
});
</script> 

das in die css:

PHP-Code:
#backdown{position:fixed;top:80px;right:10px;margin:0;padding:0;width:36px;height:36px;z-index:1;} 

img:

bild nach eurer wahl!

geht nicht auf der indexpage, nur bei threads... och mensch...

RE: Jump to Bottom - MrBrechreiz - 05.06.2015

Versuche es mal so.

Im footer Template nach

Code:
{$auto_dst_detection}

dies einfügen

Code:
<a name="bottom" id="bottom"></a>

<div id="backtobottom"><a href="#bottom" title="Scroll nach unten"><img src="{$theme['imgdir']}/bottom.png" alt="" /></a></div>
<script type="text/javascript">
$(document).ready(function(){

    $("#backtobottom").hide();
    
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#backtobottom').fadeIn();
            } else {
                $('#backtobottom').fadeOut();
            }
        });

        var bottom = $(document).height() - $(window).height();
        $('#backtobottom a').click(function () {
            $('body,html').animate({
                scrollTop: bottom
            }, 800);
            return false;
        });
    });
    $("#backtobottom").hide(1000);
});
</script>

global.css

Code:
#backtobottom {
    position: fixed;
    bottom: 50px;
    right: 10px;
    margin: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    z-index: 100;
}

Kannst Du ja noch gerne anpassen.

RE: Jump to Bottom - hkkp - 05.06.2015

footer ganz unten (hab ich so gemacht):

PHP-Code:
<a name="bottom" id="bottom"></a>
<div id="backtobottom"><a href="#bottom" title="Scroll nach unten"><img src="{$theme['imgdir']}/backtodown.png" alt="" /></a></div>
<script type="text/javascript">
$(document).ready(function(){   
    $(function () {
        $(window).scroll(function ());
        var bottom = $(document).height() - $(window).height();
        $('#backtobottom a').click(function () {
            $('body,html') ({
                scrollTop: bottom
            });
            return false;
        });
    });   
</script> 

css:

PHP-Code:
#backtobottom{position:fixed;top:80px;right:10px;margin:0;padding:0;width:36px;height:36px;z-index:1;} 

das icon ist immer da... weil ich außen- und innenabstände zum container habe. auch die ganze animation ist nicht...

thanks to mister brechreiz... <a name="bottom" id="bottom"></a>, dies war mir klar, aber ich war am herumexperimentieren damit, halt wohin usw.