如何使用velocity.js中的complete属性来触发localscroll(How to use the complete property in velocity.js to trigger

如何使用velocity.js中的complete属性来触发localscroll(How to use the complete property in velocity.js to trigger localscroll)

我正在使用velocityjs ， localscroll （需要scrollTo ）。

我有一个默认隐藏的表单。 我正在使用一个锚标签，点击后会显示表格。

HTML

<a href="#myForm" class="button" id="show">Show the form</a>

jQuery的

$('#show').click(function (event) { $('#myForm') .velocity('slideDown', {'duration': 2000}) .velocity({'opacity': 1}, { 'complete': function () { $('#myForm').localScroll({ 'target': 'body', 'duration': 2000, 'easing': 'swing', 'hash': false }); } }); });

我遇到的是因为我没有event.preventDefault来停止跳转到目标的默认浏览器操作，我的页面正在逐渐淡入我的表单。

表格完全显示后 ，我想滚动页面。

如果我使用event.preventDefault() ，页面将根本不滚动。 这是有道理的，因为那时我告诉它不要做任何事情。

I am using velocityjs, localscroll (which needs scrollTo).

I have a form that is hidden by default. I am using an anchor tag that when clicked, will show the form.

html

<a href="#myForm" class="button" id="show">Show the form</a>

jquery

$('#show').click(function (event) { $('#myForm') .velocity('slideDown', {'duration': 2000}) .velocity({'opacity': 1}, { 'complete': function () { $('#myForm').localScroll({ 'target': 'body', 'duration': 2000, 'easing': 'swing', 'hash': false }); } }); });

What I'm running into is that because I don't have an event.preventDefault to stop the default browser action of jumping to the target, my page is jumping to my form as it is fading in.

I'd like to scroll the page after the form is fully shown.

If I use event.preventDefault(), the page will not scroll at all. Which makes sense since at that point I am telling it not to do anything.

最满意答案

不要将它与另一个库复杂化，只需使用Velocity的scroll命令滚动到所需位置，例如：

//... complete: function (form) { $(form).velocity('scroll', { duration: 2000, easing: "swing" }); }

Instead of complicating it with yet another library, just use Velocity's scroll command to scroll to the required position, for example:

//... complete: function (form) { $(form).velocity('scroll', { duration: 2000, easing: "swing" }); }