标签: scrolltop

我正在开发一个带有垂直滚动导航的单页网站.我有一个固定位置的导航栏,我的滚动内容应该在导航右侧浮动时上下移动.这是一个预览链接:http://mistersaisho.com/actioncreations/pageSlider/

问题是它在firefox,safari和chrome中运行得非常好.当我在Ipad上查看它时,第一次选择导航项时,滚动效果很好.一旦完成,导航中的所有点击功能都无法正常工作,即使是那些不控制滑块内容的功能也是如此.

当我动画像marginTop这样的不同属性时,我没有得到错误,这在我的项目中不起作用,因为我还需要能够使用页面滚动器在整个站点中导航.

有没有人对如何解决这个问题有任何想法？

谢谢.

以下JQuery代码将页面滚动到表单中的第一个错误:

$('html,body').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top -30},'slow');

但是,如果我用$('html,body')一个容器元素的名称替换,例如$('.myDivClass')具有固定定位的div类,它似乎不能正常工作.每次提交都会向上和向下滚动到随机位置.如果容器元素不是html,body,它似乎不正常.

我无法弄清楚我做错了什么.

容器元素的CSS看起来像这样(所以你知道我的意思):

.mcModalWrap1{
position:fixed;
top:0;
left:0;
width:100%;
padding:50px;
background-image:url(images/overlay.png);
overflow:auto;
z-index:999;
display:none;
}

我已经尝试使用position()而不是offset()来进行相对定位,但它并没有什么区别.

谢谢!

更新:看起来没有解决方案.

我想知道如果当前滚动位置大于112px,如何将css规则分配给元素.

我试过这个,但它不起作用:

    <script type="text/javascript">
$window.scrollTop(function(){ 

var a = 112;
var pos = $window.scrollTop();
if(pos > a) {
    $("menu").css({
                position: 'fixed'
            });
}
else {
    $("menu").css({
                position: 'absolute',
                top:'600px'
            });
}
});
</script>

我正面临着jquery animate scrollTop到定义div的问题.

我使用此代码为滚动设置动画:

$('body').animate({scrollTop: $('#sections_display').offset().top-100}, 500, function(){
    $('#ajax_load').load('file.php');
});

但这在Firefox或IE中不起作用.

当我使用$('html').animate而不是$('body').animate它在Chrome中不起作用.

我也尝试使用两者:$('html,body').animate但问题是回调函数$('#ajax_load').load('file.php');执行了两次,这次调用文件2次.

我通过使用php临时解决了这个问题,但这个解决方案迫使我在每个页面重复代码2次,以制作支持$('body').animate和支持的2个浏览器阵列$('html').animate.

我在这里搜索并发现了这个:jquery animate scrolltop回调但是没有用.

我也尝试过:

$(window).animate

$(document).animate

$('#container-div').animate

但没办法实现这一目标.

我能找到一个跨浏览器的方法来实现这个目标吗？

我想要做的是在运行一次之后取消绑定特定的功能.在下面的代码中,它是窗口滚动.

 $(window).scroll(function(){
     if($(window).scrollTop() == viewportheight ){
          $("#landing_page").fadeOut(function() { $(window).scrollTop(0); $(window).unbind("scroll");});
     }
 });

基本上,当#div淡出时,我希望它滚动(0).滚动顶部后,我需要整个功能解除绑定.

有没有办法给这个函数一个特定的名字,然后回调那个名字？因为此代码有效,所以只删除所有滚动功能.(我不想要的事情)我在想这样的事情:

 $(window).scroll(function(FUNCTION NAME HERE){
     if($(window).scrollTop() == viewportheight ){
          $("#landing_page").fadeOut(function() { $(window).scrollTop(0); $(window).unbind("FUNCTION NAME HERE");});
     }
 });

我有一个带溢出的div中的链接列表.我想要发生的是用户可以使用向上和向下按钮在此菜单菜单中导航.每次用户单击相应的按钮时,我希望div按1个链接元素的高度向上或向下滚动.我尝试了一些代码,但我似乎无法弄清楚如何使它在两个方向上滚动正确的数量.谁能帮我吗？

所有链接都具有相同的类.

编辑:

我已经设法向上和向下滚动.现在我只需要滚动1个链接高度的小步骤.

$(function() {
var ele   = $('#scroller');
var speed = 10, scroll = 5, scrolling;

$('.scroller-btn-up').click(function() {
    // Scroll the element up
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() - scroll );
    }, speed);
});

$('.scroller-btn-down').click(function() {
    // Scroll the element down
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() + scroll );
    }, speed);
});

$('.scroller-btn-up, .scroller-btn-down').bind({
    click: function(e) {
        // Prevent the default click action
        e.preventDefault();
    },
    mouseleave: function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
            } …

在Chrome中运行以下内容始终返回0:

$(window).on('load', function(){
     console.log($(window).scrollTop());
});

通过控制台运行相同的命令:

$(window).scrollTop()

返回正确的数字.(即:843)

StackOverflow上有很多关于这个问题的问题,但没有一个给我一个正确的工作答案或替代方案.我不知所措......

我试图在页面向下滚动时淡出div(页面滚动 - 不仅仅是fadeOut效果).我正在使用这段代码在页面向下滚动时调整div的不透明度:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
        $('.logo_container').css({'opacity':( 100-scroll )/100});
});

我的问题是,对我来说,它消失得太快,我想在用户滚动时更加微妙的淡入淡出.任何人都可以想到一个更好的逻辑来做出更慢,更微妙的淡出.

这是一个显示我的代码的JSFIDDLE

iOS和iframe ..这样的痛苦。我有一个简单的“ 返回页首”按钮，该按钮应使滚动具有动画效果（而不仅仅是跳转到页面顶部）。

$(document).on('click touchstart', '.backtotop', function() {
    $('html, body').animate({ scrollTop: 0 }, 1500);
});

除iOS上的iframe外，此功能均可在所有地方使用。我仍然不太了解iOS如何处理iframe。jQuery的.scrollTop（）函数也不起作用（无论如何都不能动画）。

在iOS上的iframe中唯一起作用的是：

parent.self.scrollTo(0, 0);

显然，这不是最佳解决方案，因为它不适用于桌面浏览器。通常，如果您对如何在iOS上修复此问题或iframe有了更深入的了解，将非常感谢。

我正在使用线性布局管理器,并RecyclerView使用a LinearLayout Manager来填充一些项目列表.当我recyclerview第一次显示并使用时:

linearLayoutManager.scrollToPosition(desiredindex);

它滚动到我喜欢的顶部:

现在这里是棘手的部分,

当我滚动到顶部recyclerview(即新项目索引将低于desiredindex)并且我打电话:

linearLayoutManager.scrollToPosition(desiredindex);

它仍然可以正常工作.

但是当recyclerview已滚动超出desiredindex,了recycler view滚动使得desiredindex项目涉及到底部,而不是顶部.

但我希望瓷砖滚动到顶部而不是底部: