contao-academy
10/31/2016 - 10:09 AM

jQuery Scroll to Tip

jQuery Scroll to Tip

<script>$(document).ready(function(){$('div.nach_oben_link').hide();$(window).scroll(function(){var value=600;var scrolling=$(window).scrollTop();if (scrolling>value){$('div.nach_oben_link').fadeIn();}else{$('div.nach_oben_link').fadeOut();}});$('div.nach_oben_link').click(function(){$('html,body').animate({scrollTop:'0px'},1000);return false;});});</script>
  .nach_oben_link {
    display: block;
    position: fixed;
    right: 0;
    top: 85%;
    background: #434343 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAaCAQAAACAh71+AAABBklEQVRIx7XVO27CQBSF4RFISJRIgHuoKdkAYQFU6bKPFEjYPKrUKVJlCVkHHRKETaSFVIifAiT8mHvnOjFnJDcz/iRL93gcrup1fQRCgxdeGQbPWUkiNgCcSSohifjmnuW/yRwYQA0k3QKookFSAAEWfyIVUERVki479CxKkQYQYG4mjaAHFUg6AvgTRr0kHbbeV2Mi9t6dRCVFMLmNfQAtkDqoorGXFMF5rqAKmiFpW0AVneXJrxIdkdBxiqTJyd5kEf1Ik3WO9v+NiL5lPzwuA3rRA70sWeMztb1yhmTQX0bFIarxDsCJqTOGiPWtrE9SewY803clQp0RE1qFUX/APV7tugB5vuEIqeeJmAAAAABJRU5ErkJggg==) center center no-repeat;
    background-size: 50%;
    width: 55px;
    height: 55px;
    text-indent: -3333px;
    outline: 0;
    cursor: pointer;
  }
<div class="nach_oben_link">
   <a href="{{env::request}}#top">Nach oben</a>
</div>