js小效果:返回顶部

返回顶部:

<div id="gotop" onclick="javascript:scroll(0,0);"><img src="images/top33x33.png"></div>
<style type="text/css">
#gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;height:33px;z-index:999;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(window).scroll(function() {//滚屏
        var scrollTop = $(document.body).scrollTop();//滚动高度
        var windowH = $(window).height();//页面高度
        if(scrollTop>windowH){
            $("#gotop").show();
        }else{
            $("#gotop").hide();
        }
    });
});
</script>

..

时间: 2024-12-09 15:51:14

js小效果:返回顶部的相关文章

jquery小demo——返回顶部

此文闲来无事写了个返回顶部小demo,当文档高度大于窗口高度时,返回顶部按钮显示,否则隐藏. 具体代码见下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

小程序返回顶部top滚动

wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageScroll: function (e) { //console.log(e) var that = this var scrollTop = e.scrollTop var backTopValue = scrollTop > 500 ? true : false that.setData({ bac

js+JQuery实现返回顶部功能

在HTML头部添加 <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 然后 jquery 中写入 <script>        $(function () {            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失            $(function () {    

原生js,实现“返回顶部”效果

html: <span>^</span> css body{                height: 3000px;            }            span{                display: block;                position: fixed;                bottom: 20px;                right: 10px;                font-size: 60px;

js小效果-轮播图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } #wrap{ width:500px; height:260px; margin:50px auto; position:r

js小效果:上移和下移!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://wangshixiong.vip/zp/move.js"></script> <style type="text/css"> body { background:

网页常用的小工具--返回顶部

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 5 <meta charset="UTF-8" /> 6 <title>top</title> 7 <meta name="keywords" cont

js小效果-全选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var aBtn=document.getElementsByTagName('input'); var count=0; aBtn[0].onclick=fun

纯js实现页面返回顶部的动画

啥也不说了,直接上代码 1 var scrollTop = document.body.scrollTop; 2 document.body.style.marginTop = -scrollTop + 'px'; 3 document.body.scrollTop = 0; 4 document.body.style.transition = 'all 1s ease-in-out'; 5 document.body.style.marginTop = 0; 6 setTimeout(func