答复: target 滚动目标（与行为？）的 CSS 属性（或 JS 方法？）

我们用的js类似，但是监听的是a标记的onclick事件，并始终return false。
监听hashchange是个很懒的做法，从第二次点击同一链接开始就不再触发事件了，除非点击其他的链接。
57写死倒是没什么问题，毕竟这个页面上banner就那么高，而且这个高度也不会变化。
scroll-position或类似的属性如果有就太方便了，至少不用写脚本了。

-----邮件原件-----
发件人: Kang-Hao（Kenny）Lu（平寿） [mailto:kanghao.lkh@alibaba-inc.com] 
发送时间: 2015年1月12日 10:00
收件人: W3C HTML5 中文興趣小組
主题: 控制 :target 滚动目标（与行为？）的 CSS 属性（或 JS 方法？）

我想这事一段时间了，一直没找个空写一下，最近又看了个例子，比如这些官网
Spark 官网：

http://spark.apache.org/docs/latest/graphx-programming-guide.html


点一个标题，第一次的时候会跳到 “正确” 的位置，如果点击第二次同样的链接就
跳不到了，他用的脚本是

function maybeScrollToHash() {
  console.log("HERE");
  if (window.location.hash && $(window.location.hash).length) {
    console.log("HERE2", $(window.location.hash), $(window.location.hash).offset().top);
    var newTop = $(window.location.hash).offset().top - 57;
    $(window).scrollTop(newTop);
  }
}

监听的是 hashchange，可想而知。这个脚本太可以吐槽了（57 是写死的），另
外，个人认为这个感觉还是比较像是应该用 CSS 解决的，例如：

h2:target {
 scroll-position: under-fixed | above-fixed | auto | <length> }

之类的？当前 [cssom-view] 有个 'scroll-behavior' [1]，看起来像是决定动态
效果的，而不是最终位置，另外 [cssom-view] 还给 scrollTo/By 加了个
ScrollOptions 参数，感觉相当累赘。还没空想一个一体化的想法，先丢出来看看
有没有人有类似 Spark 官网的例子。

'scroll-behavior' 相关讨论如下[2][3][4]。

[1]
http://dev.w3.org/csswg/cssom-view/#smooth-scrolling:-the-%27scroll-behavior%27-property

[2] http://lists.w3.org/Archives/Public/www-style/2014May/thread#msg255

[3] http://lists.w3.org/Archives/Public/www-style/2014Oct/thread#msg14

[4] http://lists.w3.org/Archives/Public/www-style/2014Dec/thread#msg390




以上

Kenny

Received on Monday, 12 January 2015 03:36:37 UTC