Question

我在页面中添加了一个链接向下滚动：

<div class="scroll">
    <a onclick="scroll_down()" href="#" id="'scroll_id"> 
        click me 
    </a>
</div>

<script>
    function scroll_down() {
        var y = $(window).scrollTop(); //current position
        $("html, body").animate({scrollTop: y + $(window).height()}, 600);
    }

    function scroll_top() {
        window.scrollTo(0, 0);
    }
</script>

我希望在达到onclick的底部时设置scroll_top属性。

向下滚动有效，但到达底部时，onclick <a>标记的属性不会更改。

<script>
    window.onscroll = function (ev) {
        if ((window.innerHeight + window.scrollY) >= $(document).height()) {
            console.log('bootom')
            $('#scroll_id').attr('onClick', '');
            $('#scroll_id').attr('onClick', 'scroll_top()');
        }
    }
</script>

做一些身体告诉我错误在哪里？为什么它不起作用？

Answer 1

使用fmodl()事件属性被认为是不好的做法 - 并且在运行时修改它们会更糟。

更好的解决方案是使用单个不显眼的事件处理程序来确定页面的当前滚动位置，并根据需要上下移动，如下所示：

on*

$(function() {
  $('#scroll_id').click(function(e) {
    e.preventDefault();
    var $win = $(window);
    var scrollTarget = $win.height() + $win.scrollTop() >= $(document).height() ? 0 : $win.scrollTop() + $win.height()
    $("html, body").animate({
      scrollTop: scrollTarget
    }, 600);
  });
});

.scroll {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

#content {
  height: 1000px;
  position: relative;
}

#content div {
  position: absolute;
}

#content .top {
  top: 20px;
}

#content .middle {
  top: 500px;
}

#content .bottom {
  bottom: 0;
}

Answer 2

语法错误：

<a onclick="scroll_down()" href="#" id="'scroll_id">

应该是

     id="scroll_id">

（删除额外＆＃39;）

如何使用jQuery在页面上上下滚动？

2 个答案: