精华内容
下载资源
问答
  • 回到顶部

    2021-01-17 14:18:02
    下面我们来看一下如何用jQuery来实现...然后通过jQuery中定义的animate()函数来创建自定义动画,设置元素中滚动条的垂直偏移量为0,这样的话当你点击按钮后页面就会自动回到顶部。而且因为通过animate()函数创建了自

    下面我们来看一下如何用jQuery来实现点击按钮然后页面回到顶部的效果,首先我们要在HTML文档中引入jQuery,如下图所示

    在这里插入图片描述
    在成功引入jQuery后,我们在HTML文档中给点击回到顶部的按钮添加一个类名,然后在script部分用jQuery创建回到顶部按钮的点击事件,如图

    在这里插入图片描述
    图中画红线部分是用来绑定点击事件的类名。
    然后通过jQuery中定义的animate()函数来创建自定义动画,设置元素中滚动条的垂直偏移量为0,这样的话当你点击按钮后页面就会自动回到顶部。而且因为通过animate()函数创建了自定义动画,所以在页面回到顶部时,会有一个动画过渡的效果。代码如下图:

    在这里插入图片描述
    一般来说回到顶部的按钮最开始是隐藏的,只有当你滚动到一定距离才会显示出来,所以我们要通过移动滚轮的距离来判定回到顶部的按钮是否显示。
    首先我们要通过将CSS中的display属性的属性值设置为none,这样可以让回到顶部的按钮隐藏起来,如下图

    在这里插入图片描述
    再在script中通过scrollTop()函数来获取滚轮在屏幕中的偏移量并将它赋值给sc(sc为自定义名称)如下图所示:

    在这里插入图片描述
    然后通过流程控制语句中的if…else…语句来判断该执行代码的哪一条,设当滚轮在屏幕中的偏移量大于200时,将回到顶部的按钮显示出来,小于200时将回到顶部的按钮隐藏起来。(图中的数值200是可以自己改变的,越大就要滚动越远距离才能显示,具体大小根据实际情况自行调节。),代码如下:

    在这里插入图片描述
    上图中的show()是jQuery中定义的函数,它可以将隐藏的元素显示出来;而hide()则是可以将显示的元素隐藏起来。
    这样就可以达到我们要的效果了。

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,544
精华内容 3,417
关键字:

回到顶部