jQuery实现页面回到顶部功能

发布时间:2019-01-12 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jQuery实现页面回到顶部功能脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<div class="cnblogs_code">



<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;head</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;meta </span><span style="color: #ff0000"&gt;charset</span><span style="color: #0000ff"&gt;="utf-8"</span> <span style="color: #0000ff"&gt;/></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;title</span><span style="color: #0000ff"&gt;></span>回到顶部<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;title</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;style </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text/css"</span><span style="color: #0000ff"&gt;></span><span style="background-color: #f5f5f5; color: #800000"&gt;
        body </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 8000px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        h1</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; #000</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;

        img </span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; fixed</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            bottom</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            right</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 150px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 195px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            display</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
            z-index</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>


    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;head</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>

    <span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt; 返回顶部小火箭 </span><span style="color: #008000"&gt;--></span>

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="img/gotop.gif"</span> <span style="color: #0000ff"&gt;/></span>

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text/javascript"</span><span style="color: #ff0000"&gt; src</span><span style="color: #0000ff"&gt;="js/jquery-1.12.4.min.js"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span> 
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;
        $(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
            $(window).scroll(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){</span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;scroll 页面滚动事件</span>
                <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt;  sTop</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;$(window).scrollTop();</span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;scrollTop  滚动距离</span>

                <span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; (sTop</span><span style="background-color: #f5f5f5; color: #000000"&gt;>=</span><span style="background-color: #f5f5f5; color: #000000"&gt;500</span><span style="background-color: #f5f5f5; color: #000000"&gt;) {
                    </span><span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;
                     * 都可以实现显示的作用
                     * $("img").show();
                    $("img").css("display","block")</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #000000"&gt;
                    $(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;img</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;).fadeIn();
                } </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;else</span><span style="background-color: #f5f5f5; color: #000000"&gt;{

                </span><span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt;    都可以实现隐藏的作用
                 * 
                 * $("img").hide()
                        $("img").css("display","none")</span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span><span style="background-color: #f5f5f5; color: #000000"&gt;
                    $(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;img</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;).fadeOut()
                }
            })

            $(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;img</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;).click(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
                $(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;body,html</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;).animate({scrollTop:</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;},</span><span style="background-color: #f5f5f5; color: #000000"&gt;500</span><span style="background-color: #f5f5f5; color: #000000"&gt;)
            })
        })
    </span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

总结

以上是脚本之家为你收集整理的jQuery实现页面回到顶部功能全部内容,希望文章能够帮你解决jQuery实现页面回到顶部功能所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: