标签: scrollto

我正在研究一个项目并使用Ariel Flesler的jquery.scrollTo.js和jquery.localScroll.js ...我有本地链接滚动到页面上的各种div.

我遇到的麻烦是我在页面顶部有一个固定位置的导航栏,而ScrollTo正在计算窗口位置(正确)而没有考虑到它.下面是scrollTo.js文件...有人可以告诉我在哪里以及如何我会插入会导致Y轴滚动位置为+ [Y] px的代码？

/**
 * jQuery.ScrollTo - Easy element scrolling using jQuery.
 * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 3/9/2009
 * @author Ariel Flesler
 * @version 1.4.1
 *
 * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
 */
;(function($){var m=$.scrollTo=function(b,h,f){$(window).scrollTo(b,h,f)};m.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1};m.window=function(b){return $(window).scrollable()};$.fn.scrollable=function(){return this.map(function(){var b=this,h=!b.nodeName||$.inArray(b.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!h)return b;var f=(b.contentWindow||b).document||b.ownerDocument||b;return $.browser.safari||f.compatMode=='BackCompat'?f.body:f.documentElement})};$.fn.scrollTo=function(l,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};if(l=='max')l=9e9;a=$.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=$(k),d=l,p,g={},q=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px)?$/.test(d)){d=n(d);break}d=$(d,this);case'object':if(d.is||d.style)p=(d=$(d)).offset()}$.each(a.axis.split(''),function(b,h){var f=h=='x'?'Left':'Top',i=f.toLowerCase(),c='scroll'+f,r=k[c],s=h=='x'?'Width':'Height';if(p){g[c]=p[i]+(q?0:r-o.offset()[i]);if(a.margin){g[c]-=parseInt(d.css('margin'+f))||0;g[c]-=parseInt(d.css('border'+f+'Width'))||0}g[c]+=a.offset[i]||0;if(a.over[i])g[c]+=d[s.toLowerCase()]()*a.over[i]}else g[c]=d[i];if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],u(s));if(!b&&a.queue){if(r!=g[c])t(a.onAfterFirst);delete g[c]}});t(a.onAfter);function t(b){o.animate(g,j,a.easing,b&&function(){b.call(this,l,a)})};function u(b){var h='scroll'+b;if(!q)return k[h];var f='client'+b,i=k.ownerDocument.documentElement,c=k.ownerDocument.body;return Math.max(i[h],c[h])-Math.min(i[f],c[f])}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);

/**
     * jQuery.LocalScroll - Animated scrolling navigation, using anchors. …

这是我到目前为止的代码:

    $('.my_button').click(function() {

        $.scrollTo( '#my_anchor', 1200, {easing:'easeInOutExpo'}, function() {          

            // function not working here

        });

    });

回调函数以前工作,但由于我改为使用缓动的scrollTo方法,它不再了!

为了说清楚我只需要知道如何让我的回调函数再次运行,其他一切都很好.

我的投资组合位于http://www.visualise.ca/,我正在研究运行同位素的新版本.它可以在http://themes.visualise.ca/visualise上找到.

当我点击将在页面中加载帖子的图像缩略图时,我希望页面使用jQuery scrollTo插件和以下代码滚动到项目(单击的图像缩略图):

$container.delegate( $itemString, 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
        $('html,body').scrollTo(this, 800);
});

但经过测试,看起来物品的位置总是顶部:1左:容器的1(如果物品没有1px边框,则为0).此外,当我使用Firebug检查项目时,突出显示的蓝线不在项目本身上,而是位于顶部:1左侧:容器中的1.

所以我怀疑因为同位素所有的插件现在都认为所有项目都位于0,0(1,1因为我的情况下的边距).

为了正确滚动,我该怎么办？

非常感谢您的时间和帮助.

我正在scrollTo()网页上尝试,我想要一个按钮来触发scrollTo(); 它将滚动到窗体的顶部并突出显示第一个输入字段.

我当前的代码有效,但屏幕快速闪烁.我试图使用一个preventDefault()无济于事.请参阅下面的代码.

$(document).ready(function () {
    $("#get-started").click(function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $("#get-risk").offset().top
        }, 2000);
        $("#get-started-apply-now-form [name='last_name']").focus();
    });
});

我有一个可编辑的TableView,其中一个按钮添加了一个新行,然后在该行的第一列调用table.edit().当用户想要添加一个将不在视口中的行时,该表会在视口中滚动新行并开始编辑.但是,调用table.scrollTo(newRow)会导致各种错误行为.该行进入视图,但只有部分时间进入编辑.似乎发生的最多的是视口中的第一行开始编辑而不是新添加的行.这将发生在将在视图中添加的行以及将在视图外的行.

我的代码:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableColumn.CellEditEvent;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class TableViewScrollToTest extends Application {

    private final TableView<Person> table = new TableView<>();
    private final ObservableList<Person> data = FXCollections.observableArrayList();
    private final HBox hb = new HBox();
    private final Button addButton = new Button("_Add");
    private int seq = 0;

    @Override
    public void start(Stage …

我试图看看它是否可能有一些简单的HTML标记,如下所示:

<a href="www.mysite.com/pageXXX#location1"></a>
<a href="www.mysite.com/page1#location1"></a>
<a href="www.mysite.com/page2#location1"></a>
<a href="www.mysite.com/page3#location1"></a>

...然后,#location1当新页面加载某种简单的JQuery脚本时,让它向下滚动到ID ？或者,如果这是使用scrollTo插件可以实现的东西,我该怎么做呢？

问题是pageXXX上存在链接,要滚动到的ID在所有页面上,即.pageXXX,page1,page2,page3等......理想情况下,如果还有一种方法可以从URL中删除哈希标记和标识符,那也很好,但此刻只需将其平滑地向下滚动到新页面上的ID就是我所追求的.

滚动的简单问题.我正在寻找一种方法来阻止滚动动画的排队.我试图在stop()中工作,但它似乎没有做到这一点..任何想法？这是代码......

('#nav_hold li a').click(function(){

$ currLoc = $(this).attr('href');

$newLoc = $currLoc.replace('#!','');  

Run Code Online (Sandbox Code Playgroud)

$ newLoc ="#"+ $ newLoc;

$(window).scrollTo($ newLoc,1000);
});

这里是网站FYI http://www.dudnyk.com/files/connector/

我有一个单页网站,当它点击导航链接时滚动到正确的部分 - 请参阅http://www.cleanupbritain.org获取一个实例.

我现在正在扩展网站并添加一个位于子目录中的博客,我正在尝试设置博客导航以加载www.cleanupbritain.org,然后滚动到正确的部分.这可能吗？我对jQuery相当新,所以任何帮助都会非常感激.

这是导航链接:

<a href="http://www.cleanupbritain.org" onClick="goToByScroll('news')">News</a>

这是我写的脚本:

<!-- ScrollTo for navigation scrolling -->
<script type="text/javascript">
jQuery(window).load(function() {
    function goToByScroll(id){
            jQuery('html,body').animate({scrollTop: $("#"+id).offset().top - 236},'slow');
    }
    function goToTop(){
            jQuery('html,body').animate({scrollTop: 0},'slow');
        }
});
</script>

我认为导航链接不对,但我不确定需要更改什么来确保脚本在正确的时间执行？

非常感谢您的帮助,

刘易斯.

我有一个幻灯片播放,滚动一个div来显示幻灯片中的下一张照片.我还有一个功能设置,当鼠标处于非活动状态时隐藏照片描述,但在鼠标移动时显示描述.

在Firefox中,没有问题,div滚动到新照片并且没有触发mousemove事件.但是,在Webkit中,鼠标在窗口上,但不活动,每当div滚动到一张新照片时,就会触发两到三个mousemove事件.

这是您浏览的网站.在webkit浏览器中导航到投资组合页面(我打开控制台打开),当照片循环播放时,该页脚应保持隐藏状态.http://96.0.13.132/

我有一个div元素overflow-y设置为auto.现在我有一大堆带有类的元素highlight1.我想用classas 来回滚动元素highlight1.

由于某种原因,jquery scrollTo无法正常工作.这是我尝试使用的语法:

$('#highlightDiv').animate({
     scrollTop: $("#"+elementId).offset().top + 'px'
}, 'fast');

这是我想要完成的Jsfiddle.有人可以解释为什么滚动没有移动到适当的元素.