Question

他们如何在下面提供的网站上制作“告诉我更多”效果。我读过关于在jQuery中读取更多/更少效果的内容，但我发现该网站感兴趣的是除非点击该按钮，否则页面无法滚动。

Answer 1

我希望这段代码可以帮助您实现这一效果。

＆＃13;

$('button').click(function(){
  $("body").addClass("scroll");
  $('html, body').animate({
      scrollTop: $(".goto").offset().top
  }, 500);
});

＆＃13;

body{
  margin: 0;
  height: 1000px;
  overflow: hidden;
}
body.scroll{
  overflow: auto;
}
.goto{
  margin-top: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button>Goto section</button>
<div class="goto">
Section
</div>

＆＃13;

Answer 2

您可以使用html锚点，即使给定网站的链接使用了相同的

喜欢这个

<style>
  #header_div {
      height: 100vh; //fit to screen's height
  }

  #more_info_div {
      height: 100vh; 
  }
</style>

<div id="header_div">--content--</div>
<div id="more_info_div">--content--</div>

在#中的div id之前使用href转到该特定div，就像这样

<a href="#more_info_div" >Click me</a>

你可以通过css提供转换和其他效果

更多/更少的影响

2 个答案: