Question

在我的页面上，我有许多长段落，其中包含“更多”链接以切换其他文字。

当点击“更多”切换时，页面应向上移动100px以显示新文本而无需用户滚动。

我正在使用的代码是：

$("html, body").animate({ scrollTop: "100px" });

目前，这仅适用于第一个链接'Home1' - 当在home1上点击“more”时，它会向上移动100px

但是在其他链接（Home2 / Home3）上，当点击更多时，页面会回到'Home1'。

我做错了什么？

$(document).ready(function() {
  var ellipsestext = "...",
    moretext = "More",
    lesstext = "Less",
    showChar;
  $('.more').each(function() {
    var content = $(this).html();
    
    showChar = content.search(/<!\-\-\s*break\s*\-\->/);
    if (content.length > showChar && showChar != -1) {


      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);

    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {

      $(this).removeClass("less");
      $(this).html(moretext);

    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
       // Example : Scroll the window at 100px from the top
      $("html, body").animate({ scrollTop: "100px" });
      

    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();

    return false;
  });
});

<li><a class="first" href="#f">Home1</a></li>
<li><a class="second" href="#second">Home2</a></li>
<li><a class="third" href="#third">Home3</a></li>

这是一个带文字的jsfiddle。

编辑：更新了文字，并根据评论同意添加了jsfiddle。澄清页面上的“主页”与“Home1”部分。

Answer 1

正如您所猜测的，这个问题是您的scrolltop代码：

$("html, body").animate({ scrollTop: "100px" });

scrollTop说，将此元素（html，body）移动到指定的位置（不是金额）

这里指定的位置是“100px” - 所以每个“更多”链接都会将页面滚动到 100px - 使它们看起来都回到'Home1'。

此question and answer提供了更多详细信息。

基本上，您需要获取当前位置并向其添加100px，例如（取自链接问题中的评论）：

var y = $(window).scrollTop(); 
$("html, body").animate({ scrollTop: y + 100 }, 600);

ScrollTop功能：当我点击更多切换时，页面会回到顶部

1 个答案: