我有一个带垂直滚动条的大桌子.我想使用jQuery/Javascript滚动到此表中的特定行.
有没有内置的方法来做到这一点？
div {
width: 100px;
height: 70px;
border: 1px solid blue;
overflow: auto;
}<div>
<table id="my_table">
<tr id='row_1'><td>1</td></tr>
<tr id='row_2'><td>2</td></tr>
<tr id='row_3'><td>3</td></tr>
<tr id='row_4'><td>4</td></tr>
<tr id='row_5'><td>5</td></tr>
<tr id='row_6'><td>6</td></tr>
<tr id='row_7'><td>7</td></tr>
<tr id='row_8'><td>8</td></tr>
<tr id='row_9'><td>9</td></tr>
</table>
</div>这个功能很好.它将主体滚动到所需容器的偏移量
function scrolear(destino){
var stop = $(destino).offset().top;
var delay = 1000;
$('body').animate({scrollTop: stop}, delay);
return false;
}
但不是在Firefox中.为什么？
-编辑-
要在接受的答案中处理de double触发器,我建议在动画之前停止元素:
$('body,html').stop(true,true).animate({scrollTop: stop}, delay);
我在div中有20个列表项,一次只能显示5个.滚动到项目#10,然后项目#20的好方法是什么？我知道所有物品的高度.
该scrollTo插件可以做到这一点,但它的来源并不是很容易理解而没有真正进入它.我不想使用这个插件.
比方说,我有一个功能,需要2元$parentDiv,$innerListItem,既不$innerListItem.offset().top也不$innerListItem.positon().top让我对$ parentDiv正确scrollTop的.
我有一个经常会被发现的问题.问题是无处可寻找明确的解决方案.
锚有两个问题.
主要目标应该是在使用锚点跳转到页面时获得一个没有任何哈希值的漂亮干净URL.
所以锚的结构是:
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div class="wrap">
<a name="one">text 1</a>
<a name="two">text 2</a>
<a name="three" class="box">text 3</a>
</div>
好的,如果您点击其中一个链接,网址将自动更改为
www.domain.com/page#1
最后这应该只是:
www.domain.com/page
到现在为止还挺好.现在第二件事是,当您在互联网上搜索该问题时,您会发现它javascript是一种解决方案.
我找到了这个功能:
function jumpto(anchor){
window.location.href = "#"+anchor;
}
并调用该函数:
<a onclick="jumpto('one');">One</a>
会像以前一样.它会将哈希添加到网址中.我还补充道
<a onclick="jumpto('one'); return false;">
没有成功.所以,如果有人能告诉我如何解决这个问题,我真的很感激.
非常感谢.
由于我添加了一些scrollTop动画,我的回调的某些部分会被调用两次:
$('html, body').animate({scrollTop: '0px'}, 300,function() {
$('#content').load(window.location.href, postdata, function() {
$('#step2').addClass('stepactive').hide().fadeIn(700, function() {
$('#content').show('slide',800);
});
});
});
它似乎只是重复一次.show(),至少我没有那个load()或者.fadeIn()第二次被称为第二次的印象.在.show()得到尽快,因为它已经完成了第一次重复.设置scrollTop动画速度0顺便没有帮助!
我假设它与动画队列有关,但我无法弄清楚如何找到解决方法,特别是为什么会发生这种情况.
我试图在不使用jQuery的情况下制作动画"滚动到顶部"效果.
在jQuery中,我通常使用这段代码:
$('#go-to-top').click(function(){
$('html,body').animate({ scrollTop: 0 }, 400);
return false;
});
如何在不使用jQuery的情况下为scrollTop设置动画？
我有一个页面,其中包含其中包含div的表行的滚动条是从数据库动态生成的.每个表格行都像一个链接,有点像你在视频播放器旁边的YouTube播放列表中看到的那样.
当用户访问该页面时,他们所在的选项应该转到滚动div的顶部.此功能正常运行.问题是,它太过分了.就像他们选择的选项大约10px太高.因此,访问该页面,该URL用于标识选择了哪个选项,然后将该选项滚动到滚动div的顶部.注意:这不是窗口的滚动条,它是带滚动条的div.
我使用此代码使其将选定的选项移动到div的顶部:
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
它将它移动到div的顶部,但是大约10个像素太远了.有谁知道如何解决这个问题？
我正在使用Angular框架编写单页应用程序.我是新手.我已阅读本指南,以帮助我理解jQuery和Angular之间的根本区别,我想尽可能地遵循本指南,而不是使用jQuery.
除了jQuery有助于解决一些浏览器不兼容问题并提供一个有用的函数库,比如能够从窗口顶部知道元素的顶部位置,如$('element').offset().top.没有普通的JavaScript似乎能够接近而不需要重写这个功能,在这一点岂不是一个更好的主意,用一个jQuery或类似的jQuery库？
具体来说,我正在尝试做的是设置一个指令,一旦元素的顶部滚动到窗口中的某个位置,就将元素固定到位.这是它的样子:
directives.scrollfix = function () {
return {
restrict: 'C',
link: function (scope, element, $window) {
var $page = angular.element(window)
var $el = element[0]
var elScrollTopOriginal = $($el).offset().top - 40
$page.bind('scroll', function () {
var windowScrollTop = $page[0].pageYOffset
var elScrollTop = $($el).offset().top
if ( windowScrollTop > elScrollTop - 40) {
elScrollTopOriginal = elScrollTop - 40
element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px');
}
else if ( windowScrollTop < elScrollTopOriginal) {
element.css('position', 'relative').css('top', '0').css('margin-left', '0');
} …当我点击一个按钮时,我希望能够跳到或滚动到页面上的特定div或目标.
$('#clickMe').click(function() {
//jump to certain position or div or #target on the page
});
我怎样才能做到这一点？
scrollTo当jQuery animate函数调用该函数时,我遇到了问题.
这是我的代码:
$("#button").click(function(){
$("body").animate({scrollTop: 1400},"slow");
});
单击按钮时,在正文滚动之前会出现闪烁.例如,我在(滚动位置)1000,当我点击按钮时发生以下情况:
在Firefox上它总是出现,有时也在chrome上.