Edit in JSFiddle

var cover = $(".cover-wrap");
var scorllTop;

$(".text a").click(function() {
  scorllTop = $(window).scrollTop();
  cover.removeClass("hide");
   $("body").css({
     top: "-" + scorllTop + "px",
     left: 0
   }).addClass("position");
});

$(".layer").click(function() {
  cover.addClass("hide");
  $("body").removeClass("position");
  $(window).scrollTop(scorllTop);
});

  <div class="text">
    <p>占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <a>点我</a>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
     <p>占位滚动</p>
    <p>占位滚动</p>
    <p>占位滚动</p>
  </div>
  <div class="cover-wrap hide">
    <div class="layer"></div>
    <div class="list-wrap">
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
      <p>111111111111</p>
    </div>
  </div>
 

.hide {
  display: none;
}

.text a {
  display: block;
  width: 50px;
  height: 30px;
  line-height: 30px;
  background: red;
  color: #fff;
  margin: 0 auto;
  text-align: center;
}

.cover-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.layer {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
}

.list-wrap {
  width: 200px;
  height: 300px;
  overflow: scroll;
  margin: auto;
  background: #fff;
  position: fixed;
  left:50%;
  top:50%;
  z-index: 99;
  margin:-150px 0 0 -100px;
}
.position{
  position:fixed;
}