Javascript 移动网站滚动帮助器

我有一个很长的文章页面，我想帮助移动用户滚动。对于移动应用程序中很长的列表，通常有一个按字母顺序排列的索引，可以帮助用户跳转到列表中的各个位置。如何为Web应用程序实现类似的功能

---

如果有帮助的话，我的堆栈是angularjs/jquery/phonegap。

您可以使用类似的可切换侧栏。将浏览器调整到手机屏幕的宽度，以理解我的意思

然后在angularjs中创建一个指令，将jQuery的animate函数包装成滚动到文章中的特定部分。像这样：

angular.module('yourModule', [])
       .directive('scrollTo', function() {
          return {
           restrict : 'EA',
           link: function(scope , element, attr){
                   $('html, body').animate({
                      scrollTop: $( attr['href'] ).offset().top
                    }, 300);
                 }
          };
       });

其中href将是文章中特定部分的id。然后，您所需要做的就是将该指令应用于侧边栏中的链接

... 
<li><a href="#section-1" scroll-to>Jump to section 1</a></li>
...

。。。

...

---

希望这有帮助。

您可以使用类似的可切换侧栏。将浏览器调整到手机屏幕的宽度，以理解我的意思

然后在angularjs中创建一个指令，将jQuery的animate函数包装成滚动到文章中的特定部分。像这样：

angular.module('yourModule', [])
       .directive('scrollTo', function() {
          return {
           restrict : 'EA',
           link: function(scope , element, attr){
                   $('html, body').animate({
                      scrollTop: $( attr['href'] ).offset().top
                    }, 300);
                 }
          };
       });

其中href将是文章中特定部分的id。然后，您所需要做的就是将该指令应用于侧边栏中的链接

... 
<li><a href="#section-1" scroll-to>Jump to section 1</a></li>
...

。。。

...

---

希望这对你有所帮助。

这可能就是你想要的

---

我自己还没有用过，但似乎很容易就可以使用。

这可能就是你想要的

---

我自己还没有用过，但似乎很容易就可以使用。

我想这样的东西对你可能有用：。这只是一个基本的原型，我放在一起回答，但我可以扩展的概念，如果需要的话。基本上，它会在屏幕右侧创建一个半透明条，查找文章的每个标题（需要进行调整以满足您的需要），并放置可单击/点击的锚以跳转到单个文章。当您单击其中一个时，页面将滚动到该文章。我有一些想法使它实际可用，但这里是概念证明

CSS

#scrollhelper {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 5%;
  background-color: rgba(0,0,0,0.2);
  overflow: hidden;
}

#scrollhelper .point {
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  margin: 0 auto;
  background-color: rgba(0,0,255,0.5);
}

JavaScript

var articles;

function buildScrollHelp() {
    var bodyHeight = $("body").height();
    var viewHeight = window.innerHeight;

    $("#scrollhelper").html("");

    articles.each(function() {
        var top = $(this).offset().top;
        var element = document.createElement("a");
        element.className = "point";
        element.href = "#" + $(this).attr("id");
        element.style.top = ((top / bodyHeight) * viewHeight) + "px";
        $(element).on("click", function(e){
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $($(this).attr("href")).offset().top
             }, 500);
        });

        $("#scrollhelper")[0].appendChild(element);
    });
}

$(document).ready(function() {

    articles = $("body").children("[id]");
    $("body").append("<div id=\"scrollhelper\"></div>");

    $(window).resize(function(){
        buildScrollHelp();
    });

    buildScrollHelp();

});

var条款；
函数buildScrollHelp（）{
var bodyHeight=$（“body”）.height（）；
var viewHeight=window.innerHeight；
$（“#scrollhelper”）.html（“”）；
条款。每个（功能（）{
var top=$（this）.offset（）.top；
var元素=document.createElement（“a”）；
element.className=“点”；
element.href=“#”+$（this.attr（“id”）；
element.style.top=（（顶部/车身高度）*视图高度）+“px”；
$（元素）。在（“单击”）上，函数（e）{
e、 预防默认值（）；
$（'html，body'）。设置动画({
scrollTop:$（$（this.attr（“href”））.offset（）.top
}, 500);
});
$（“#scrollhelper”）[0].appendChild（元素）；
});
}
$（文档）.ready（函数（）{
条款=$（“正文”）。子项（“[id]”）；
$（“正文”）。追加（“”）；
$（窗口）。调整大小（函数（）{
buildScrollHelp（）；
});
buildScrollHelp（）；
});

我想这样的东西对你可能有用：。这只是一个基本的原型，我放在一起回答，但我可以扩展的概念，如果需要的话。基本上，它会在屏幕右侧创建一个半透明条，查找文章的每个标题（需要进行调整以满足您的需要），并放置可单击/点击的锚以跳转到单个文章。当您单击其中一个时，页面将滚动到该文章。我有一些想法使它实际可用，但这里是概念证明

CSS

#scrollhelper {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 5%;
  background-color: rgba(0,0,0,0.2);
  overflow: hidden;
}

#scrollhelper .point {
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  margin: 0 auto;
  background-color: rgba(0,0,255,0.5);
}

JavaScript

var articles;

function buildScrollHelp() {
    var bodyHeight = $("body").height();
    var viewHeight = window.innerHeight;

    $("#scrollhelper").html("");

    articles.each(function() {
        var top = $(this).offset().top;
        var element = document.createElement("a");
        element.className = "point";
        element.href = "#" + $(this).attr("id");
        element.style.top = ((top / bodyHeight) * viewHeight) + "px";
        $(element).on("click", function(e){
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $($(this).attr("href")).offset().top
             }, 500);
        });

        $("#scrollhelper")[0].appendChild(element);
    });
}

$(document).ready(function() {

    articles = $("body").children("[id]");
    $("body").append("<div id=\"scrollhelper\"></div>");

    $(window).resize(function(){
        buildScrollHelp();
    });

    buildScrollHelp();

});

var条款；
函数buildScrollHelp（）{
var bodyHeight=$（“body”）.height（）；
var viewHeight=window.innerHeight；
$（“#scrollhelper”）.html（“”）；
条款。每个（功能（）{
var top=$（this）.offset（）.top；
var元素=document.createElement（“a”）；
element.className=“点”；
element.href=“#”+$（this.attr（“id”）；
element.style.top=（（顶部/车身高度）*视图高度）+“px”；
$（元素）。在（“单击”）上，函数（e）{
e、 预防默认值（）；
$（'html，body'）。设置动画({
scrollTop:$（$（this.attr（“href”））.offset（）.top
}, 500);
});
$（“#scrollhelper”）[0].appendChild（元素）；
});
}
$（文档）.ready（函数（）{
条款=$（“正文”）。子项（“[id]”）；
$（“正文”）。追加（“”）；
$（窗口）。调整大小（函数（）{
buildScrollHelp（）；
});
buildScrollHelp（）；
});

只需使用angular的内置

$anchorScroll

服务即可

看。以下是一些重要的代码：

在视图模板中：

---

只需使用angular的内置

$anchorScroll

服务即可

看。以下是一些重要的代码：

在视图模板中： iOS7样式列表导航器 如果你想在手机上找到一些好东西，我刚刚写了这个iOS7风格的列表导航器。我认为苹果解决这个问题的方法非常简单。所以我们偷了它

写这篇文章时考虑到你可能不会滚动主体，因为在我见过的许多智能手机设计中，滚动容器可以让你在Android<4时拥有固定的页眉和页脚，而不会生气

警告一句：这段代码非常新鲜，未经测试

CSS（摘录） HTML（摘录）

a

Javascript（zepto/jquery）

$（函数（）{
$（窗口）。在（“touchstart touchmove Mouse Over click”（触摸启动触摸移动鼠标）上，“.菜单a”，功能（e）{
e、 预防默认值（）；
净间隔（t）；
var阶数=25；
var=68；
var target=$（$（this.attr（“href”））.next（“li”）；
如果（target.length>0）{
var scroller=$（“#滚动”）[0]；
var step=parseInt（（目标[0]）。offsetTop-padding-scroller.scr
$(function() { 
  $(window).on("touchstart touchmove mouseover click", ".menu a", function(e) {
    e.preventDefault();
    clearInterval(t);
    var steps = 25;
    var padding =  68;
    var target = $( $(this).attr("href") ).next("li");
    if ( target.length > 0 ) {
        var scroller = $("#scrolling")[0];
        var step = parseInt((target[0].offsetTop - padding - scroller.scrollTop)/steps);
        var stepno = 0;
            setInterval( function() {
                if ( stepno++ <= steps  ) {
                    scroller.scrollTop += step;
                } else {
                    clearInterval(t)
                }
            }, 20);
    };
  });
});