我需要用动画执行javascript方法scrollTo(x,y).我不能'使用jQuery来做到这一点.
我正在建立我的第一个js/jQuery网站,我遇到了打嗝.我试图在一个脚本中同时使用jScrollpane(Kelvin Luck)和scrollTo(Ariel Flesler)插件.如果我评论一个,另一个工作.它们是互相排斥的吗？我是否需要从jScrollpane解除绑定功能以删除"scrollTo"调用冲突或其他内容？(我不知道该怎么做).
我正在使用jScrollPane 2beta11和scrollTo 1.4.2.这是我使用两者的精简代码:
// JavaScript Document
$(document).ready(function() {
//jScrollPane Init
$('#scrollingDiv').jScrollPane({
});
//scrollTo Refresh
$('div.scroll-pane').scrollTo( 0 );
$.scrollTo( 0 );
//Buttons
var $scrollDiv = $('#scrollingDiv');
var next = 1;
$('#but-rt').click(function(){
$scrollDiv.stop().scrollTo( 'li:eq(1)', 800 );
next = next + 1;
});
});
我知道jScrollPane有自己的scrollTo功能,但我需要在我的特定项目中使用scrollTo的jQuery Object选择器.我知道我的HTML/CSS排列很好,因为只要另一个功能被注释掉,每个功能都可以运行.
(顺便说一句,我计划使用"next"变量来增加scrollTo按钮一旦我弄清楚...与我的问题没有关系.)
任何帮助深表感谢.如果我需要提供任何其他信息,请告诉我.谢谢!
-Patrick
我期待使用jQuery.SerialScroll(基于jQuery.ScrollTo)实现水平滚动.
我在这篇文章中讨论过,目前我正在使用liScroll进行连续水平滚动.
但是,现在我需要离散滚动,我让SerialScroll完美地用于垂直滚动.
出于某种原因,如果'axis'属性被指定为'x',则不会发生任何事情.
我甚至无法获得从右向左滚动工作的SerialScroll示例.
我有这样的HTML:
<div id="pane">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
我有这样的jQuery,当轴为'y'时有效
jQuery(function($) {
var $pane = $('#pane');
$pane.serialScroll({
items: 'div',
next: $pane, // the container itself will get bound
duration: 2100,
force: true,
axis: 'x',
step: 1, //scroll 1 news each time
event: 'showNext' //just a random event name
});
setInterval(function() {//scroll each 12 seconds
$pane.trigger('showNext');
}, 12000);
});
有任何想法吗？
//编辑(接受答案)
对于那些出现的人来说,接受的答案摆脱了对"serialScroll"的需要(只需要scrollTo).高度不是必需的.一定要将$('scroller')更改为$('mywrap')或$(target.parent().parent()).您还可以像这样设置自动滚动:
var …我有以下Javascript代码.
页面加载后,它会滚动到正确的位置.当我点击链接运行该功能时,页面会滚动到页面顶部.
我该如何解决？
<html>
<head>
<script type="text/javascript">
function scroll() {
window.scrollTo(0, 400)
}
</script>
<title></title>
</head>
<body onload="window.scrollTo(0, 400)">
<img src="a.jpg"/>
<a href="#" onclick="scroll">comments1</a>
</body>
</html>
我有一个带有列表的div容器,这个列表中只有一个项目一次可见,其余项目被隐藏(容器有溢出:隐藏).
我希望jQuery在点击完全链接后显示所请求的项目:
有任何想法吗？请问滚动来帮助我吗？我试过这个插头但没有运气.我宁愿不使用iframe.
<div class="wrap">
<div class="layer">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
</div>
<span class="next" style="cursor:pointer;"> (next div) </span>
使用ScrollTo插件的jQuery(http://demos.flesler.com/jquery/scrollTo/)
$('.next').click(function() {
$(".wrap").scrollTo( $('.post').next(), 800, {margin:true} );
});
演示:http://jsfiddle.net/UaGjs/8/
它不起作用:(它只工作第一次
我现在注意到一些简单的jQuery不能用于移动IE9和IE10.我有一些版权链接和简单的滑动联系表单,它使用animate().我还将scrollTo插件与jQuery结合使用.我尝试了不同的版本,但仍然没有解决方案.也许我错过了一些明显的东西.
以下是一个版权链接的代码以及用于打开和关闭的联系表单的代码.
$('#privacy').click(function(){
$('#copyright').hide('fast');
$('#policy').toggle('slow');
$.scrollTo('+=800px', 800, { axis:'y' });
});
$('#plusSign').click(function(){
if ($('#contactFormHolder').hasClass('active')){
$('#contactFormHolder').animate({top:'-200px'},1000).removeClass('active');
}else{$('#contactFormHolder').animate({top:'0px'},1000).addClass('active');}
});
我似乎在使用".mCustomScrollbar("scrollTo",divID)"函数滚动到元素时遇到问题.
我有一个包含很多div的div(id ="#wrapper")(每个20px高达800 div的高度).
然后我将mCustomScrollbar添加到此#wrapper div以使用其自定义滚动条功能,如下所示:
$("#wrapper").mCustomScrollbar();
现在我有一个大的可滚动div包含div的"列表式"结构,而不是实际的列表,只是像列表一样堆叠在一起的div.
在我的页面的其他地方,我有一个按钮,其中包含"#wrapper"div中div元素的id,当我单击此按钮时我希望将div元素滚动到视图中,这是我当前的尝试:
var divID = 'div[id^=' + clickedID +']';
$('#wrapper').mCustomScrollbar("scrollTo",divID);
这个函数声称在#wrapper div中将"divID"滚动到视图中然而它确实存在的问题是它在"divID"进入视图之前有时需要2-4次调用"scrollTo"函数.
有人可以帮助我理解为什么"divID"在第一次调用"scrollTo"函数时不会滚动到视图中,以及如何让它按照我的预期运行？
亲切的问候
我正在infinte卷轴网站上制作个人作品集.现在我有4个div(家庭,生物,工作和联系).我有一个带有4个名字的菜单的标题,与div相同.所以我想做的是当我在div"Home"时点击一下触发器并单击菜单"Work"我希望浏览器向下滚动到第三个div,即"工作".希望我能说清楚:)
我正在使用带有validator.js的bootstrap创建一个表单.表单工作正常但我想滚动到第一个错误,如果有一些.我是jquery/js的新手,我现在不知道如何实现这个目标.
我尝试过这样的事情:
HTML
<form id="repost-form" method="post" enctype="multipart/form-data" role="form">
<div class="col-sm-6 form-group">
<p><?php echo __('Your project title', 'ProjectTheme'); ?></p>
<p><input type="text" size="50" class="form-control " name="project_title" value="<?php echo (empty($_POST['project_title']) ? ($post->post_title == "draft project" ? "" : $post->post_title) : $_POST['project_title']); ?>" data-error="<?php echo __('Insert the project title','ProjectTheme'); ?>" required></p>
<div class="help-block with-errors"></div>
</div>
<input class="submit_green" type="submit" name="project_submit1" value="<?php _e("Submit", 'ProjectTheme'); ?> >>" />
</form>
JS
$('#repost-form').validator().on('project_submit1', function (e) {
if (e.isDefaultPrevented()) {
$('html, body').animate({ scrollTop: $(".with-errors:first").offset().top - 50 }, 500);
$(".with-errors:first").focus();
} …javascript jquery requiredfieldvalidator scrollto twitter-bootstrap
scrollto ×10
jquery ×8
javascript ×5
html ×2
animation ×1
css ×1
jscrollpane ×1
next ×1
onload ×1
scroll ×1
serialscroll ×1