Tag: 滚动

Jquery：从当前位置向下滚动页面100px: 如何将页面设置为距当前位置100px？我的代码不起作用： $(‘html,body’).animate({ scrollTop: $(window).position().top + 100 }) 像这样，但没有它将页面滚动到特定元素，而是从Windows当前位置滚动100px： $(‘html, body’).animate({ scrollTop: $(“#scrollToHere”).offset().top }, 2000);

到达div（滚动）时更改ul样式: 我想在滚动时更改ul样式并使用jQuery到达div，解释下来。 CSS： #menu { background-color:#ccc; position:fixed; width:100%; } .menutext { padding:25 40 30 !important; display:inline-block; } .menutext2 { padding:25 40 0 !important; display:inline-block; color:red; } .alldivs { width:300px; height:200px; background-color:a9a9a9; } HTML代码： Change the style of me to .mebutext2 on arriving to DIV1 Change the style of me to .mebutext2 on arriving to DIV2 Change […]

限制jQuery-ui Draggable仅在给定区域内向上拖动: 我有一个固定位置的图像，我用CSS制作动画，当用户滚动时向下移动屏幕边缘。 – 效果很好。当图像到达屏幕底部时，用户可以点击它并将其动画回到顶部。 – 也运作良好。我也试图让用户使用jQuery-ui Draggable将其拖动到顶部。 – 这里出现了并发症。我需要将图像向上拖动，从不向下，所以我通过移动带有可拖动图像的包含包装来限制我的可拖动元素仅向上拖动。我还在页面顶部完全限制拖动，以防止图像被拖到页面顶部之外。在大多数情况下，这在Firefox中运行良好，但我在Webkit浏览器中遇到问题，当用户第一次开始拖动它时，可拖动图像“跳起来”。我也有问题让这种效果在不同的屏幕尺寸上运行良好，因为我正在使用顶部和底部位置调整。的jsfiddle // repel down animation var previousScroll = 0; var scroll = function () { var currentScroll = $(this).scrollTop(); var z = $(window).scrollTop(); if (currentScroll > previousScroll && $(‘#repel’).css(‘top’) > ‘-400px’) { //down scroll code $(“#repel”).removeClass(“climb”); $(“#repel”).addClass(“repel”).delay(400).css(‘top’, ‘+=2%’); } if (currentScroll […]

Jquery – 滚动到div: 我不能让我的Jquery工作。我输入了一些代码，这些代码应该在页面上向下滚动到一个div。我在a标签和jquery周围添加了HTML。 HTML jQuery的 $(‘#fbeksempler a’).on(‘click’, function(evt){ evt.preventDefault(); var target = $(this).attr(‘href’); $(‘html, body’).stop().animate({scrollTop: $(target).offset().top}, 2000); });

使用jQuery实现Smooth Vertical滚动时遇到问题: 我正在构建一个连续滚动的网页，其导航应该跳转到页面上的不同位置。我试图遵循这个例子，并实现一个jQuery平滑滚动效果。 HTML工作正常 – 链接会在您单击时将您带到页面上的其他位置，但jQuery滚动效果不起作用。这是html的重要部分： work project1 project2 project3 project4 project5 project6 project7 project8 about contact 到目前为止这是javascript :(它与上面链接的教程网页上的内容完全相同） $(function() { $(‘ul.nav a’).bind(‘click’,function(event){ var $anchor = $(this); $(‘html, body’).stop().animate({ scrollTop: $($anchor.attr(‘href’)).offset().top }, 1500,’easeInOutExpo’); event.preventDefault(); }); }); 任何人都有任何想法，为什么这对我不起作用？谢谢！

jQuery .load回调/滚动/ CSS溢出: 我正在开发一个非常简单的基于jQuery的聊天室（用于介绍性研讨会）。当前聊天显示在设置为400px高和自动溢出的div中。 jQuery的“load”函数用于从数据库中检索HTML格式的聊天并将它们放入div中。我有一些非常简单的代码，可以确保聊天div始终滚动到底部。此代码位于名为scrollToBottom的函数中，该函数使用load函数中的完成回调function调用： load语句位于一个名为getChat的函数中，该函数在页面准备就绪时调用，然后每秒调用一次。这是相关的代码块： $(function() { getChat(); setInterval(“getChat();”, 1000); }); function getChat() { $(“#chatDiv”).load(“chat_server.php?get_chats=true”, scrollToBottom() ); } function scrollToBottom() { var chatHeight = document.getElementById(“chatDiv”).scrollHeight; $(“#chatDiv”).scrollTop( chatHeight ); } 问题：第一次调用getChat时，div不会滚动到底部。在后续调用中（通过setInterval），滚动工作正常。以下是我目前所知道的事情：回调是第一次被调用，但是当我提醒scrollHeight时，它第一次是“400”而后续时间是“441”（即当内容大于div大小时应该是什么）。 441高内容的scrollTop值400应该滚动到底部，但是当我在scrollToBottom中输入硬值400时，问题仍然存在。这让我觉得问题与CSS /滚动而不是加载回调有关。聊天div开始为空，但将其更改为包含单个或单个字母并未解决问题。使用足够的硬编码内容开始div需要滚动DID来解决问题。在这个阶段，似乎滚动条需要可见/活动才能使scrollTop工作……但是没有解释为什么它不能在第一次工作 – 因为回调是在内容发生之后发生的已加载（因此滚动条应可见/活动）… 只是为了使它更奇怪，如果回调函数是匿名内联函数，它工作正常… $(function() { getChat(); setInterval(“getChat();”, 1000); }); function getChat() { $(“#chatDiv”).load(“chat_server.php?get_chats=true”, function() […]

幻灯片显示每张幻灯片上的字体颜色更改+回调字体设置滚动时的颜色: 我试图在头元素中完成一些事情。首先，我想将jquery幻灯片设置为相对。其次，我会将我的png徽标和导航链接固定在幻灯片前面。因为有些幻灯片会很暗，有些会很亮，所以我需要使用logo + nav链接来改变设置颜色，因为图像会循环播放，因此可以随时阅读。到目前为止，似乎我可以通过div循环完成这两项任务，但由于图像是相对的并且徽标+导航将被修复，我将需要固定div的背景的不透明度来改变它的不透明度向下滚动时，幻灯片向上滚动并离开视图，显示0 – 100。而且由于logo + nav的颜色有时会是一种颜色，有时候是另一种颜色取决于显示的幻灯片，我需要添加一个额外的回调告诉logo + nav在滚动时返回黑色，无论滚动时是什么开始了。我在这里有半工作的DEMO 。此演示显示滚动时的幻灯片+ div不透明度。通过他们在小提琴中不是很好玩，他们在我的实际网站上一起工作得很好。随意拆开它。谢谢！

如何在航点function内滚动动画？: 当用户向下滚动时，我有从屏幕左侧和右侧出现的图像。使用divPosition = $(‘div’).offset().top; 获取包含元素的位置我从scrollValue = $(document).scrollTop();减去该值scrollValue = $(document).scrollTop(); 并将值应用于绝对定位图像上的左侧位置。包含div的偏移量是在刷新和resize时计算的。在不调整窗口大小的情况下， x=scrollValue – divPosition随刷新页面的滚动距离而变化。我希望它保持一致。有没有更好的方法来使这种类型的动画工作。例如，是否可以使用垂直滚动作为带有航点的x值来触发动画？ window.onresize=function(){ divPosition = $(‘div’).offset().top; }; $(document).scroll(function(){ scrollValue = $(document).scrollTop(); x = scrollValue – divPosition; } 这是该网站的链接。当我发现问题的原因时，我会在这个问题中发布相关的代码部分。 http://www.otherdewi.com/gg.html

jQuery – 平滑滚动到div: 嗨我写了一些代码，点击后滚动页面到一个元素但在顺利滚动之前它跳转到页面的顶部。有人可以解释一下我做错了什么吗？这是剧本 $(‘a[href*=”#”]’).click(function(e){ e.preventDefault(); if($(this).attr(‘href’) == ‘#’) { $(‘html, body’).animate({ scrollTop: $(‘body’).offset().top }, 1000); window.location.hash = ”; } else { $(‘html, body’).animate({ scrollTop: $( $.attr(this, ‘href’) ).offset().top – $(this).height() }, 1000); window.location.hash = $(this).attr(‘href’); } return false; }); 告诉我在哪里可以学习JS :)请

滚动div中绝对定位的div跳跃: 我知道有类似的问题，但到目前为止我还没有办法解决我的问题。这个jsfiddle反映了我的要求。为了解释，div中有几个垂直堆叠的view-div（溢出）。每个view-div都有一个label-div，应该显示在左上角。如果view-divs水平滚动，标签应保持在视图中。当视图垂直滚动时，向上消失的视图应该将其标签向下推，直到它完全消失。另一个不在这个jsfiddle示例中的要求是view-divs可以垂直resize（我准备好了代码，但我认为这个例子太大了）。现在，我实现它的方式不起作用。标签移动不够顺畅。我真的希望它们粘在容器div的边缘。此外，当您快速向上滚动时，标签不会落在左上角。其他一些SO问题/答案表明我应该在固定和绝对定位之间切换，具体取决于滚动方向。但我认为这不会起作用，因为用户可以同时水平和垂直拖动滚动背景。我希望$labels.css({“left” : scrLeft})方法可以简单地工作，这似乎是合理的。 :-)我试着简化我的例子，但是那里的运动太过于激动。有任何想法吗？谢谢！！