使用 JavaScript 滚动页面

发布于 2024-11-06 11:41:10 字数 1603 浏览 0 评论 0原文

我正在使用 Ender.js 并且我试图让页面滚动到特定位置。我认为我在这里做错了什么，但页面甚至没有移动。理想情况下，我希望使用动画事件，但 emile 不接受scrollTop 作为参数。任何帮助表示赞赏。

$.domReady(function () {
    function startPageScroll(finalPos){
      var scrollAmount = 0;
      var id = setInterval(function(){
        if(scrollAmount < finalPos){
          $('body,html').scroll(0,50);
          scrollAmount+=50;
        }
        else{clearInterval(id);}
      },100);
    }
    $('a.back-to-top-link').each(function(element) {
        var link = $(element);
        var target = link.attr("href");
        var position = $(target).offset().top;      
        link.on('click', function(event) {
            event.preventDefault();
            startPageScroll(position);
        });
    });
});

我的构建包括：

原文

I'm using Ender.js and I am trying to get the page to scroll to a specific position.
I think I'm doing something wrong here, but page doesn't even move. Ideally I would have liked to use an animate event but emile doesn't accept scrollTop as a parameter.
Any help is appreciated.

$.domReady(function () {
    function startPageScroll(finalPos){
      var scrollAmount = 0;
      var id = setInterval(function(){
        if(scrollAmount < finalPos){
          $('body,html').scroll(0,50);
          scrollAmount+=50;
        }
        else{clearInterval(id);}
      },100);
    }
    $('a.back-to-top-link').each(function(element) {
        var link = $(element);
        var target = link.attr("href");
        var position = $(target).offset().top;      
        link.on('click', function(event) {
            event.preventDefault();
            startPageScroll(position);
        });
    });
});

My build consists of:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

壹場煙雨 2024-11-13 11:41:10

上周我们刚刚推出了带有 Javascript 滚动功能的网站新版本。
上看到它，但我已经提取了以下基本示例的代码：

<html lang="en">
<head>
    <title>BeeBole - Simple and Fast Timesheets</title>
    <style>
      body{ padding:0 1em; margin:0;}
      ul{ padding:0;margin:0;}
      li{ list-style:none; float:left; margin:0 1em;}
      h1{ clear:both;}
    </style>
</head>
<body>
    <a id="home" name="home"></a>
    <div class="header">
        <ul class="menu">
            <li><a class="fr current" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
            <li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
            <li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
        </ul>
    </div>
    <div class="chapter home">
        <h1>Home</h1>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
    </div>

    <a id="pricing" name="pricing"></a>
    <div class="header">
        <ul class="menu">
            <li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
            <li><a class="current fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
            <li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
        </ul>
    </div>
    <div class="chapter pricing">
        <h1>Pricing</h1>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>

    </div>

    <a id="tour" name="tour"></a>
    <div class="header">
        <ul class="menu">
            <li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
            <li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
            <li><a class="current fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
        </ul>
    </div>
    <div class="chapter tour">
        <h1>Take a tour</h1>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>

    </div>
    <script>
    (function(){
        window.beebole = {
            getPos: function( elm ){
                var x = 0, y = 0;
                while( elm != null ) {
                    x += elm.offsetLeft;
                    y += elm.offsetTop;
                    elm = elm.offsetParent ;
                }
                return {x:x, y:y};
            },
            damper:function(rfnAction, rfnDone, duration){
                var interval,
                    startTime = new Date().getTime();

                interval = setInterval( function(){
                    var pos, 
                        t,
                        now = new Date().getTime();

                    t = now - startTime;
                    if(t >= duration){
                        clearInterval(interval);
                        rfnDone.call(beebole);
                    }else{
                        t = 2 * t / duration;
                        if (t < 1) {
                            pos = 0.5*t*t*t*t;
                        }else{
                            t -= 2;
                            pos = -0.5 * (t*t*t*t - 2);
                        }                       
                        rfnAction.call(beebole, pos);
                    }
                }, 15 );
            },
            scrollTo: function( a ){
                try{
                    var endName = a.href.split('#')[1],
                        endElm = document.getElementById(endName),
                        start = isNaN(window.pageYOffset) ? 
                            document.documentElement.scrollTop :
                            window.pageYOffset,
                        end = beebole.getPos(endElm).y,
                        length = beebole.getPos(endElm).y - start;

                    this.damper(function(pos){
                        //when moving
                        window.scrollTo(0, start + length * pos);
                    }, function(){
                        //when done
                        window.location.hash = endName;
                    },
                    //duration
                    Math.max( Math.abs( Math.round(length / 3) ), 1200));
                    return false;
                }catch(e){
                    return true;
                }
            }
        };
    })();

    </script>
</body>
</html>

您可以在 http://beebole.com 在 lorem ipsum 所在的位置添加更多内容。或者将浏览器窗口设置得非常小以进行滚动。

单击链接即可查看页面移动。

如果浏览器关闭了 Javascript，浏览器将使用默认的 # 键负责滚动。但显然没有阻尼效果。
未在 IE6 和 IE7 上进行测试。

We just rolled out a new version of our web site last week, with a Javascript scrolling.
You can see it live at http://beebole.com but I've extracted the code for a basic example below:

<html lang="en">
<head>
    <title>BeeBole - Simple and Fast Timesheets</title>
    <style>
      body{ padding:0 1em; margin:0;}
      ul{ padding:0;margin:0;}
      li{ list-style:none; float:left; margin:0 1em;}
      h1{ clear:both;}
    </style>
</head>
<body>
    <a id="home" name="home"></a>
    <div class="header">
        <ul class="menu">
            <li><a class="fr current" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
            <li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
            <li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
        </ul>
    </div>
    <div class="chapter home">
        <h1>Home</h1>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
    </div>

    <a id="pricing" name="pricing"></a>
    <div class="header">
        <ul class="menu">
            <li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
            <li><a class="current fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
            <li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
        </ul>
    </div>
    <div class="chapter pricing">
        <h1>Pricing</h1>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>

    </div>

    <a id="tour" name="tour"></a>
    <div class="header">
        <ul class="menu">
            <li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
            <li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
            <li><a class="current fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
        </ul>
    </div>
    <div class="chapter tour">
        <h1>Take a tour</h1>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
        <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>

    </div>
    <script>
    (function(){
        window.beebole = {
            getPos: function( elm ){
                var x = 0, y = 0;
                while( elm != null ) {
                    x += elm.offsetLeft;
                    y += elm.offsetTop;
                    elm = elm.offsetParent ;
                }
                return {x:x, y:y};
            },
            damper:function(rfnAction, rfnDone, duration){
                var interval,
                    startTime = new Date().getTime();

                interval = setInterval( function(){
                    var pos, 
                        t,
                        now = new Date().getTime();

                    t = now - startTime;
                    if(t >= duration){
                        clearInterval(interval);
                        rfnDone.call(beebole);
                    }else{
                        t = 2 * t / duration;
                        if (t < 1) {
                            pos = 0.5*t*t*t*t;
                        }else{
                            t -= 2;
                            pos = -0.5 * (t*t*t*t - 2);
                        }                       
                        rfnAction.call(beebole, pos);
                    }
                }, 15 );
            },
            scrollTo: function( a ){
                try{
                    var endName = a.href.split('#')[1],
                        endElm = document.getElementById(endName),
                        start = isNaN(window.pageYOffset) ? 
                            document.documentElement.scrollTop :
                            window.pageYOffset,
                        end = beebole.getPos(endElm).y,
                        length = beebole.getPos(endElm).y - start;

                    this.damper(function(pos){
                        //when moving
                        window.scrollTo(0, start + length * pos);
                    }, function(){
                        //when done
                        window.location.hash = endName;
                    },
                    //duration
                    Math.max( Math.abs( Math.round(length / 3) ), 1200));
                    return false;
                }catch(e){
                    return true;
                }
            }
        };
    })();

    </script>
</body>
</html>

Either add more content where the lorem ipsum are. Or make the browser window very small to have a scroll.

Click the links to see the page move.

If the browser has Javascript off, the browser will take in charge the scroll using the default # key. But obviously without the damper effect.
It was not tested on IE6 and IE7.

回复收藏 0 原文

~没有更多了~