Question

我正试图在我的网站上只有一个链接到“折叠区域”的链接，我将在其中提供一个简单的联系表格;我的想法是让这个链接做一个类似于js视差的漂亮过渡，一旦到达折叠区域下方，就会巧妙地“反弹”几个像素。（锚之间的空间大约是800px）

我在下面的代码中的尝试，但它仍然只是作为一个没有任何过渡的锚点被读取。（我应该加载不同的jQuery库，还是以不同的顺序加载它们？）

更新了尝试12-16：

致电

正在调用的文件夹：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

关闭head标签之前。（如果有问题，可以在关闭</head>之前使用一些内联样式

<script type="text/javascript">

    $('a').on('click', function (event) {
        event.preventDefault();//stop the browser from jumping to the anchor
        var href  = $(this).attr('href'),
            oset  = $(href).offset().top;
        $('html, body').stop().animate({
            scrollTop : oset
        }, 700, function () {
            location.hash = href;
        });
    });

    </script>

标记，CTA divs

<div id="top" class="scrollpls"><a href="#bottom"><img src="http://www.mysite.com/imgs/down_btn.png" border="0" style="float:right; margin-top:200px;"></a></div>

..和doc

附近的底部

   <div id="bottom" class="scrollpls"><a href="#top">
<img src="http://www.mysite.com/imgs/upsubway.png" style=" float: right;
    float: right;
    margin-right: -74px;
    margin-top: 700px;
}"></a></div>

http://jsfiddle.net/Hpegt/1/

从关于此函数的早期问题创建的小提琴，并声明创建具有div高度的样式。由于在小提琴中为所有div声明这个会破坏我的布局，我尝试用类

.scrollpls {
    height : 500px;
    border :0px solid #000;
}

我在这里做错了什么？在我有一天得到这个之后，我会试着弄清楚如何在导航到点之后实现一个微妙的反弹“轻松”。

感谢您的帮助

Answer 1

有大量的内置easing effects if you include jQueryUI。

尝试修改你的小提琴 - http://jsfiddle.net/CzQXC/

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),
        oset  = $(href).offset().top;
    $('html, body').stop().animate(
        {
            scrollTop : oset
        },
        1000,
        'easeInOutElastic',
        function ()
        {
            location.hash = href;
        }
    );
});

Answer 2

试试这个：

<script type="text/javascript">
    $(function() {
        // this should really be in a click handler, but just for an example:
        $('html,body').animate({
            scrollTop: $("#testtop").offset().top
        }, 2000, 'bounce');
    });
</script>

注意：bounce参数指定要使用的缓动。这是jQueryUI的一部分，因此您需要下载并将其包含在您的网页上，以使效果正常工作。

Answer 3

出于某种原因，我把代码放入后需要几分钟才能运行，但最后解决了，我认为这是解决方案：

#top, #bottom {
    height : 130px;
    border : 0px solid #000;
    overflow:hidden;
}

视差过渡，两个锚点/ div之间有微妙的反弹

3 个答案: