Question

你好朋友我有一个链接到我的html中的锚

<div id="anchor" class="container-full">
</div>

这是我的html中的div

#anchor{
    padding-top: -100px;
    margin-top: 100px;
}

我的目标是让它滚动100px，这是我用css尝试但不幸的是没有发生。

jQuery(".nav li a").click(function(e) {
        e.preventDefault();
        $id = jQuery(this).attr("data-id");
        jQuery("a.clicked").removeClass("clicked");
        jQuery(this).addClass("clicked");
        jQuery('html, body').animate({
           scrollTop: jQuery("#"+$id).offset().top
        }, 1000);
});

编辑添加了js

 let maskPath = UIBezierPath(roundedRect: containerView.bounds, byRoundingCorners: [.TopLeft, .TopRight, ], cornerRadii: CGSize(width: 10.0, height: 10.0))
 let maskLayer = CAShapeLayer(layer: maskPath)
 maskLayer.frame = containerView.bounds
 maskLayer.path = maskPath.CGPath
 maskLayer.masksToBounds = true
 containerView.layer.mask = maskLayer

Answer 1

由于您已经在使用jQuery来处理滚动，因此在设置scrollTop属性时尝试向偏移量添加100，这会导致滚动行为超过{{3}中目标元素的位置100px 3}}来电：

jQuery('html, body').animate({
       scrollTop: jQuery("#"+$id).offset().top + 100 // scroll 100px past the element
}, 1000);

示例代码段

＆＃13;

.space { height: 500px; }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <a href="#anchor" data-id='anchor'>anchor</a>
  <div class='space'></div>
  <div id="anchor" class="container-full"><h1>Hi</h1></div>
  <div class='space'></div>
  <script>
    $(function(){
      $("a").click(function(e) {
        e.preventDefault();
        $id = $(this).attr("data-id");
        $("a.clicked").removeClass("clicked");
        $(this).addClass("clicked");
        $('html, body').animate({
           scrollTop: $("#"+$id).offset().top + 100
        }, 1000);
      });
    });
    
  </script>
</body>
</html>

＆＃13;

CSS使锚点链接降低100px

1 个答案: