zoukankan      html  css  js  c++  java
  • Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

    Ever read a really long blog post or article and then had to scroll all the way up to the top of the screen to get to the menu? It can be a little frustrating. It’s easy to fix, you can have a fixed menu or as you’ll see here you can provide a quick and stylish way to get back to the top.

    Getting Started

    HTML wise all we need to do is add a “back to top” link at the bottom of the blog post

    <a href="#" class="back-to-top">Back to Top</a>

    scroll-to-top-no-css

    We then need to style and position it. Here I’m setting its position to fixed and moving it to the bottom right side of the screen. I’ve also given it a semi-transparent background and finally hidden it. To make it stand out a little more, I’ve also given it a hover effect to darken the background a little.

    .back-to-top {
        position: fixed;
        bottom: 2em;
        right: 0px;
        text-decoration: none;
        color: #000000;
        background-color: rgba(235, 235, 235, 0.80);
        font-size: 12px;
        padding: 1em;
        display: none;
    }
    
    .back-to-top:hover {    
        background-color: rgba(135, 135, 135, 0.50);
    }

    scroll-to-top-with-css

    The jQuery

    First off we need to add jQuery to our page, you can do this by adding a script tag like this

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    Or, if you’re using WordPress like this using add_action and wp_enqueue_script

    function theme_enqueue_script(){ 
        wp_enqueue_script('jquery');  
    }
    add_action('wp_enqueue_scripts', 'theme_enqueue_script');

    The actual jQuery function is pretty simple, first we set our offset (after how much scrolling from the top we want the button to appear) and how long we want the scroll to top effect to last. We don’t want it to be too quick, but if it’s really slow it will be annoying. I’ve set it here to half a second.

    We then need to make our button visible when the user scrolls. To do this we use the jQuery scroll function. In this function we grab the current scroll position using scrollTop , check to see if it is greater than our offset and if it is we show the button using the fadeIn function. If it’s not we make sure the button is not visible using the fadeOut function.

    To actually scroll to the top, we need to intercept the click event on our button. First we prevent the default click from being triggered, and then we scroll back to the top using the animate function, passing in our duration. Finally we return false to ensure that no other events are raised after this.

    jQuery(document).ready(function() {
        var offset = 220;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.back-to-top').fadeIn(duration);
            } else {
                jQuery('.back-to-top').fadeOut(duration);
            }
        });
        
        jQuery('.back-to-top').click(function(event) {
            event.preventDefault();
            jQuery('html, body').animate({scrollTop: 0}, duration);
            return false;
        })
    });

    And here it is, a quick, simple but effective way of getting back to the top of a page.

    http://www.tuicool.com/articles/iEZFBv

  • 相关阅读:
    GCD的常用代码块
    多用字面量语法,少用与之等价的方法
    新建项目上下出现黑色块
    按钮UIButton的使用
    集成支付宝
    app生命周期之即将关闭
    苹果开发者计划申请材料准备(公司级)
    真机调试的一些问题记录~更新中
    iOS开发架构学习记录
    用枚举值表示状态、选项、状态码
  • 原文地址:https://www.cnblogs.com/wawahaha/p/3525703.html
Copyright © 2011-2022 走看看