CSS3 キーフレーム アニメーションでバウンス効果を実現_html/css_WEB-ITnose

まず、「トップに戻る」と「ユーザーフィードバック」の 2 つのボタンが左下隅に配置されています。

(1) [トップに戻る] ボタンは、スクロール バーが下にスライドした場合にのみ表示されます

(2) [ユーザー フィードバック] ボタンは、ユーザーが最初に開いたときにユーザーの注意を引くために震え、その後フリーズします。 。

私の実装方法

まず、位置決めを使用して、これら2つのボタンを右下の適切な場所に配置します。次に、

1. 「トップに戻る」

1. マウスをスクロールしないと「ボタン」が表示されないので、まず、display: none でボタンを非表示にしてから計算します。 jsによるスクロール スクロール後の高さ

スクロール後の高さの計算:scrollt = document.,documentElement.scrollTop+document.body.scrollTop

視覚領域の高さ: winH=$(window).height()

2.これら 2 つの高さを比較し、それがより大きい場合は、スクロールされたことを意味し、「トップに戻る」ボタンを表示できます。 code $(window).scroll( fucntion(){})

(2) IE、Chromeブラウザ対応

document.documentElement.scrollTop+

document.body.scrollTop

Chrome（IE/FFで取得した値）このボディは 0) コード:

//首页回到顶部和反馈入口$(function(){    $(window).scroll(function(){                             //只要窗口滚动,就触发下面代码         var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度  document.body.scrollTop用来兼容chrome//console.log('滚动条的高度scrollTop1-'+scrollTop1+'-scrollTop2-'+scrollTop2);        var winH = $(window).height();                       // 获取可视区高度        console.log('滚动后高度为'+'---'+scrollt);                if( scrollt+winH >winH ){                                 //判断滚动后高度超过0px,就显示              $("#gotop").fadeIn(400);                         //淡出             }else{                  $("#gotop").stop().fadeOut(400);                 //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动           }    });    $("#gotop").click(function(){                            //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部            $("html,body").animate({scrollTop:"0px"},200);    });});

1 この揺れるアニメーション効果は、

アニメーションを使用して作成されています。

2注:

IE9+ は のみをサポートします

詳細については表を参照してください

効果を確認してください: http://www.ingdan.com/