小编Edd*_*der的帖子

如何在Dart中滚动动画?

我想平滑地滚动到我的页面的一部分.在jQuery中这样做:

$('html, body').animate({
    scrollTop: $('#anchorOfMyTargetSection').offset().top
}, 'slow');
Run Code Online (Sandbox Code Playgroud)

在Dart,我可以制作卷轴,但我不知道如何设置它的动画:

int targetSection = querySelector('#anchorOfMyTargetSection').offsetTop;
window.scrollTo( 0, targetSection );
Run Code Online (Sandbox Code Playgroud)

更具体地说,我正在做一个单页,其中包含指向自我页面中各节的链接.

以下是链接:

<nav>
    <ul class="nav-list">
        <li><a href="http://example.com/#title">Home</a></li>
        <li><a href="http://example.com/#about">About us</a></li>
        <li><a href="http://example.com/#products">Products</a></li>
        <li><a href="http://example.com/#services">Services</a></li>
        <li><a href="http://example.com/#contact">Contact</a></li>
    </ul>
</nav>
Run Code Online (Sandbox Code Playgroud)

这是完整的jQuery代码:

// Generated by LiveScript 1.2.0
var smoothScrolling;
smoothScrolling = function(selector, offset){
  return $(selector).click(function(click){
    var link, anchor;
    click.preventDefault();
    link = $(this).attr('href');
    anchor = link.substring(link.indexOf('#'));
    return $('html ,body').animate({
      scrollTop: $(anchor).offset().top + offset
    }, 'slow');
  });
};
smoothScrolling('.nav-list a', -45);
Run Code Online (Sandbox Code Playgroud)

这里是Dart代码(当然没有动画部分):

import 'dart:html';

void main() {
  smoothScrollingOffset = …
Run Code Online (Sandbox Code Playgroud)

dart jquery-animate dart-html

7
推荐指数
1
解决办法
1516
查看次数

标签 统计

dart ×1

dart-html ×1

jquery-animate ×1