滚动到Sammy.js项目中的锚点链接 [英] Scroll to anchor link in a Sammy.js project

问题描述

我正在使用sammy.js框架构建一个网站。我有一个常量的侧边栏，以及在sammy的帮助下加载不同页面的主要内容视图。在侧栏我有新闻文章的链接。目前，侧边栏上的任何文章链接都只加载＃/ news路线。但我希望它加载路线并向下滚动到文章。我已经尝试在加载路径后向下滚动到文章时有一个锚点链接触发器，但我得到了sammy应用程序的错误。关于如何实现这一点的任何想法？

I am building a website using the sammy.js framework. I have a sidebar that is constant, and the main content view which loads the different pages with the help of sammy. On the side bar I have links to news articles. Currently any of the article links on the sidebar just load the #/news route. But I'd like it load the route and scroll down to the article. I've tried having an anchor link trigger once the route is loaded to scroll down to the article, but I get errors with the sammy app. Any thoughts on how this could be accomplished?

推荐答案

看起来像一个老问题，但因为它仍然没有答案......

Seems like an old question but since it's still unanswered....

您必须将您的URL定义为正则表达式，并在其末尾允许可选的书签哈希：

You have to define your URL as a regular expression, and allow an optional bookmark hash at the end of it:

get(/#\/news(#.+)?/, function() {
    var articleId = this.params['splat'];
});

这将符合以下任何路线：

This will match any of the following routes:

• ＃/ news


• ＃/ news＃


• ＃/ news＃my-news-article

然后你应该能够使用articleId找到匹配的元素并手动滚动。例如在上面的最后一条路线中，'articleId'将是'＃my-news-article'，所以使用jQuery你可以做类似的事情：

You should then be able to use the articleId to find the matching element and manually scroll. e.g. in the last route above, 'articleId' will be '#my-news-article', so using jQuery you could do something like:

var $article = $(articleId);
    $(document.body).animate({ scrollTop: $article.offset().top });
});

希望有所帮助。

这篇关于滚动到Sammy.js项目中的锚点链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！