zoukankan      html  css  js  c++  java
  • JavaScript---快速回到页面顶部

    首先设置一个DOM元素:

    <p id="back-to-top"><a href="#"><span></span>回到顶部</a></p>

    然后绑定点击事件

    $(document).ready(function () {
             //首先将#back-to-top隐藏
             $("#back-to-top").hide();
             //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
             $(window).scroll(function () {
                 if ($(window).scrollTop() > 100) {
                     $("#back-to-top").fadeIn(1500);
                 }
                 else {
                     $("#back-to-top").fadeOut(1000);
                 }
             });
             //当点击跳转链接后,回到页面顶部位置
             $("#back-to-top").click(function () {
                 $('body,html').animate({ scrollTop: 0 }, 1000);
                 return false;
             });
         });
  • 相关阅读:
    053-649
    053-648
    053-647
    053-646
    053-645
    053-644
    053-643
    053-642
    053-641
    053-640
  • 原文地址:https://www.cnblogs.com/heyucool/p/5243729.html
Copyright © 2011-2022 走看看