标签: scrollto

我正在使用 jQuery 的scrollTo插件使用向上箭头和向下箭头来上下滚动我的页面。

我有一堆带有“screen”类的 div，如下所示：<div class="screen-wrapper">...</div>

我想做的是，当我按向上或向下键时，窗口滚动到下一个或上一个具有“屏幕”类别的 div。

我已经处理好按键了。根据插件文档，要滚动窗口，可以使用 $.scrollTo(...);

这是我的代码：

$(document).keypress(function(e){
    switch (e.keyCode) {
        case 40:    // down
            n = $('.screen-wrapper').next()
            $.scrollTo( n, 800 );
          break;
        case 38:    // up

          break;
        case 37:    // left

          break;
        case 39:    // right

          break;

    }      
});

如果有帮助的话，这是 HTML div。我在页面上有一些这样的内容，本质上，我试图通过按向下箭头滚动到下一个：

<div class='screen-wrapper'>
<div class='screen'>
    <div class="sections">
        <ul>
            <li><img src="images/portfolio/sushii-1.png " /></li>
            <li><img src="images/portfolio/sushii-2.png" /></li>
            <li><img src="images/portfolio/sushii-3.png" /></li>
        </ul>
    </div>

    <div class="next"></div>
    <div class="prev"></div>
</div> 

另外，如果需要的话，我可以提供一个正在使用的链接，如果它可以帮助某人获得更好的想法。

编辑 而且，我忘了提及这里真正的问题是什么。问题是它不会向下滚动超过第一个元素，正如塞斯提到的那样。

我已经成功实现了scrollTo jQuery插件,当单击一个链接时,该插件会滚动到下一个div,类为"new".但是,我还希望能够使用箭头键向上和向下滚动到同一个类的下一个/上一个div.

我已经浏览了整个互联网,但一直无法找到如何做到这一点.我是JS的新手,所以非常简单的说明将不胜感激!

这是相关代码:

<script type="text/javascript">
jQuery(function($){

 $('<div id="next_arrow"></div>') 
  .prependTo("body") //append the Next arrow div to the bottom of the document
  .click(function(){ 
   scrollTop = $(window).scrollTop();
   $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
     $.scrollTo(h2, 800); // scroll to in .8 of a second
     return false; // exit function
    }
   });
  });

});
</script>

为了使箭头键有效,我需要添加什么？

谢谢,特德

嘿伙计们,我正在制作一个垂直滚动的网站,但是localScroll太快了.有没有办法控制它的速度？谢谢!

您好我在基础框架内使用Bootstrap Scrollspy.

到目前为止,我设法让scrollspy工作,但不是应该的.

scrollspy正确更改导航的状态,但不完全更改指定的div.

第一个div容器,其中scrollspy应该更改navi工作良好,但随后对以下容器的偏移量增加,最后scrollspy更改它在nomansland中的状态而不是div的顶部.

加载网站时,scrollspy显示最后一个导航条目,而不是第一个？

我想这是基于百分比的布局.你怎么看？

你可以在这里找到开发页面:

http://dekonstruktiv.ch/static_sheggendorn/

谢谢你的帮助

我正在努力解决jquery或javascript问题.

它已经烦人了,它告诉我,我可能认为这个太复杂了.

所以我的标记(简称)看起来像这样:

<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>

基本上只是一些容器.

每个包含不同的内容和按钮.

计划:

1)单击按钮后,窗口应向下滚动到下一个容器.

2)最后一个按钮再次滚动到第一个容器.所以我需要一个循环.

3)容器的数量可能会因页面而异.

编辑: 4)容器可能并不总是彼此直接兄弟姐妹(见下面的标记)

问题:

我可以通过为每个容器提供一个唯一的ID作为滚动效果的目标来实现这一点.

问题在于它很快就会变得太乱.

不能我只是以某种方式将" 下一个对象与类:容器 "作为目标,然后滚动到那个？

我不确定js或jquery是否是正确的方法.我对两者的了解有限.

我真的很感激能朝着正确的方向前进.

编辑:容器可能并不总是彼此的直接兄弟姐妹.

<div class="row">
        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content …

我的问题是,当我点击一个(固定位置)div来为另一个div设置动画时,整个页面会跳转到顶部.我试过preventDefault并返回false,但似乎没有什么可以解决这个问题!请帮忙.

这是脚本

$(document).ready(function(){

    $("#close").click(function(){
        $("#info").animate({ 
            width: "0",
            height:"0"
        }, 100 );

        $("#info").hide(),
        $(".container").animate({ 
            left:"0",
            width:"100%"
        }, 100 );
        return false;
    });

    $(".sidebar").click(function(evt){
        evt.preventDefault();
        $("#info").show(),
        $("#info").animate({ 
            width: "25%",
            height:"100%",
            left:"0"
        }, 100 );

        $(".container").animate({ 
            left: "25%",
            width:"75%"
            }, 100 );
        return false;
    });
});

$(document).ready(function() {
    $("#contact_menu").click(function() {
        $(body).scrollTo("#contact", 800);  
    }); 
}); 

我在我的代码中键入了这个,希望它会使我的页面滚动,但我不会工作.我试过几种方法,但我做不到.

我希望你们中的一个可以帮助我.

我试图直接从onclick动作调用scrollTo函数.找到了很多解决方案,但是没有解决方案不适合我

我试图这样做:

<button onclick="$(window).scrollTo('#mydiv',100);"type="button"  placeholder="" />CLICK ME</button>

<div id="mydiv">
</div>

我已经在这几个小时了,我根本想不出来.

基本上,我有很长的项目列表,可以在页面中填充.当用户点击其中一个项目时,我想将窗口滚动到最上面的内容将被加载(可能是糟糕的设计,我知道,但这是一个单独的问题).

以下是我的脚本的样子:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='scripts/jquery.jgrowl.js'></script>
<script type='text/javascript' src='scripts/javascript.js'></script>
<script type='text/javascript' src='scripts/supersized.js'></script>
<script type='text/javascript' src='scripts/effects.core.js'></script>
<script type='text/javascript' src='scripts/jquery.scrollTo-1.4.2-min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>

这是我页面顶部的HTML:

<div id='header'>
<div id='pagetop'></div>
</div>

这是失败的呼叫:

$.scrollTo('#pagetop',800)

当我尝试运行此行时,它不会产生错误消息,因此我知道scrollTo正在正确加载,但是当我进行调用时,它什么都不做.

任何帮助将不胜感激.

到目前为止，我仅针对错误消息正常工作。但是，我希望这也适用于成功消息。当按下联系表单中的提交按钮时，就会发生这种情况。单击页面右上角的联系人即可滚动到该联系人。

您可以在这里进行测试。

这是我用于错误消息的 jQuery：

     $(document).ready(function() {
     $(".error:first").attr("id","errors");
    $("#errors").each(function (){
        $("html,body").animate({scrollTop:$('#errors').offset().top-175}, 1000);
    });
  });

有什么方法可以修改它以使用相同的 offset().top-175 滚动到 #success 和 #errors 吗？

提前致谢！