最好的回到顶部插件gotoTop.js实例demo

最新推荐文章于 2022-12-29 16:05:39 发布
最新推荐文章于 2022-12-29 16:05:39 发布
阅读量222 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/20745
版权

这里写图片描述

直接上代码：http://download.csdn.net/detail/cometwo/9388435 

 <!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="gotoTop.js"></script>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            $(function(){
                 $(window).scroll(function(){
                    if($(window).scrollTop()>500){
                        $('a.backToTop').show();
                    }
                 })
                $('h1:odd').css('color','blue');
                $(".backToTop").goToTop();

            })
        </script>
        <style type="text/css">

            html,body{
                margin: 0px;
                padding: 0px;
                left: 0px;
                top: 0px;
            }

            body {

                height: 2000px;
            }

            div {
                width: 800px;
                height: 50px;
                border: 1px solid red;
                margin: 40px auto;
            }

            h1 {
                margin: 0px;
                padding: 0px;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                line-height: 50px;
                color: red;
                position: relative;
                overflow: hidden;
                white-space: nowrap;
                text-align: center;
            }

            h1:before,
            h1:after {
                content: " ";
                position: relative;
                display: inline-block;
                width: 35%;
                /* 调节左右中划线的长度*/
                height: 1px;
                vertical-align: middle;
                /*对象内容的垂直对其方式*/
                background: blue;
            }

            h1:before {
                left: -5px;
                /*设置线与文字的距离*/
                margin: 0 0 0 -50%;
            }

            h1:after {
                left: 5px;
                margin: 0 -50% 0 0;
            }

            a.backToTop {
                width: 60px;
                height: 60px;
                position: fixed;
                bottom: 50px;   /*页边距*/
                right: 50px; /*页边距*/
                background: url(top.gif) no-repeat -51px 0;
                display: none;
                border: 1px solid red;
            }
            a.backToTop:hover {
                background-position: -113px 0
            }
        </style>

    </head>

    <body>
        <div>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
            <h1>我是你大爷</h1>
        </div>

    </body>

</html>

gotoTop.js源码

// JavaScript Document
(function($){
    var goToTopTime;
    $.fn.goToTop=function(options){
        var opts = $.extend({},$.fn.goToTop.def,options);
        var $window=$(window);
        $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
        //$(this).hide();
        var $this=$(this);
        clearTimeout(goToTopTime);
        goToTopTime=setTimeout(function(){
            var controlLeft;
            if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {
                controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;
            }else{
                controlLeft = $window.width()- opts.pageWidthJg-$this.width();
            }
            var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6
            var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
            controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
            var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;

            if (shouldvisible){
                $this.stop().show();
            }else{
                $this.stop().hide();
            }

            $this.css({
                position: cssfixedsupport ? 'absolute' : 'fixed',
                top: controlTop,
                left: controlLeft
            });
        },30);

        $(this).click(function(event){
            $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);
            $(this).blur();
            event.preventDefault();
            event.stopPropagation();
        });
    };

    $.fn.goToTop.def={
        pageWidth:960,//页面宽度
        pageWidthJg:2 ,//按钮和页面的间隔距离
        pageHeightJg:100,//按钮和页面底部的间隔距离
        startline:300,//出现回到顶部按钮的滚动条scrollTop距离
        duration:500,//回到顶部的速度时间
        targetObg:"html"//目标位置,用body太恶心了，回不到最上面去
    };
})(jQuery);
$(function(){
    $('<a href="javascript:;" class="backToTop" title="返回顶部"></a>').appendTo("body");
});
weixin_34253539
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
返回顶部插件jquery.gototop特效代码
03-20
返回顶部插件jquery.gototop是一款当在用户向下滚动页面一段距离之后，会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后，页面以平滑的方式滚动回顶部。
最好的回到顶部插件gotoTop.js实例
01-04
最好的回到顶部插件gotoTop.js实例:http://blog.csdn.net/libin_1/article/details/50453294
html返回顶部按钮图片,goToTop（回到顶部）按钮的制作
weixin_29568143的博客
06-04 689
//GoTop mg12GoTop = function() {this.config = {pageWidth : 960,//页面宽度nodeId : 'go-top',//回到顶部按钮的IDnodeWidth : 50,//按钮宽度distanceToBottom : 120,//距离底部高度hideRegionHeight : 90,//消失高度text : ''};this.cache ...
Javascript 实现 goto
weixin_33696106的博客
03-07 3291
1 <script type="text/javascript"> 2 test1 : for (var i = 0; i < 3; i++) { 3 test2 : for (var j = 0; j < 3; j++) { 4 if (i == 1 && j == 1) { 5 continue test1; 6...
vue封装返回顶部组件【cv可用】
在写作的路上持续输出。
09-07 799
vue封装返回顶部组件【cv可用】
实现vue返回顶部backTop组件
zezejingi的博客
12-29 581
实现vue返回顶部backTop组件，在一些页面比较长的时候，可能会用到回到顶部功能，一般都是右下角一个图标我们点击可以返回到顶部，这个功能还是蛮常见的在一些网页中，这个功能看起来还是蛮简单的，我们可以自由发挥。
返回顶部插件jquery.gototop.zip
11-25
返回顶部插件jquery.gototop.zip
jquery返回顶部插件.zip
07-11
代码简介：返回顶部插件jquery.gototop是一款当在用户向下滚动页面一段距离之后，会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后，页面以平滑的方式滚动回顶部。
9.while循环，goto语句
GUDGET的博客
11-20 339
C语言中while循环，goto语句的基本用法。
Js语法局限-Goto语句的实现
11-06 6716
  Goto语句在程序开发中经常使用，我们发现在js中却没有此语法。如何实现呢？  我们可以借助break和continue来实现。break和continue经常使用在循环语句中，用来跳出循环。
vue返回顶部插件
08-12
vue 点击返回顶部插件，可以根据参数设定按钮大小，颜色，类型，返回顶部的时间等。
ArcGIS API for JS中的goTo方法总结
qq_40820382的博客
11-06 4859
goTo方法的参数可以是两个或一个。当只有一个参数时，是一个数组；当是两个参数时，第一个参数是数组（一维或二维）或对象或某个图层的graphics，第二个参数是duration。 示例： view.goTo([112.6, 22.542]) ------------------------------------------ mapView.goTo([113.6042903, 22.5501197], { duration: 2000 //视角跳转时长为2秒 }) -----------------
[Go] go中的goto语句跳到指定标签
程序员老狼专注开发aigc或客服系统应用
11-26 250
比如下面的语句goto TOP ,其中TOP就是自己的自定义的标签,下面的TOP:就是要执行的代码段一般用在需要两层循环的地方,里面goto再跳回上面去 for i := 0; i < 10; i++ { if i == 5 { goto TOP } } TOP: fmt.Printl...
C语言实现三种死循环
热门推荐
xiaopeng_csdn的博客
11-08 1万+
1、while语句 while(1) { printf(“死循环”); } 2、for语句 for(；；) { printf(&quot;死循环”）； } 3、goto语句 top: … goto top;
C语言中的goto语句
ZWHSOUL的博客
01-23 1105
C Primer Plus总结 goto语句使程序控制跳转至相应标签语句。冒号用于分隔标签和标签语 句。标签名遵循变量命名规则。标签语句可以出现在goto的前面或后面。 形式： goto label ; label : statement 示例： top : ch = getchar(); if (ch != 'y') goto top;
vue-totop
王永存
11-22 484
vue-totop vue 点击返回顶部插件，可以根据参数设定按钮大小，颜色，类型，返回顶部的时间等。 安装 npm install vue-totop -S 使用 注入 // ES6 import vueToTop from 'vue-totop' //or require var vueToTop = require('vue-totop') Vue.use(vueToTop...
js goto语句_vscode-goto-node-modules 一个快速定位 node 模块的 vscode 插件
weixin_39824529的博客
11-21 339
vscode-goto-node-modules 一个快速定位 node 模块的 vscode 插件原文：http://www.aqcoder.com/post/43在使用 VSCode 开发 Node.js (包括 node 端和前端 Vue/Angle/React) 等开发时，经常与遇到一个很痛苦的事：依赖一个模块时想大概浏览一下这个模块的源码和 API。可是 node_modules 目录下...
goto 语句和标号
05-06 4132
goto 语句及标号可能是有害的，但未必全是无用的。 影响控制流程的语句： （1）分支 （2）循环 （3）goto 无条件跳转 我们知道 break 只能跳出最内层的循环，如果在一个嵌套循环中遇到某个错误条件需要立即跳出最外层循环做错误处理，就可以用到 goto 语句：for (...) for (...){ ... if (出现错误)
vue3 gototop
最新发布
10-19
Vue3 GoToTop是一个Vue组件，用于在页面中添加一个回到顶部的按钮。它可以通过修改CSS或手动导入来使用，并且可以设置滚动高度和显示位置。在使用时，需要注意区分整体页面进行滚动置顶和当前页面局部区域进行滚动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值