Question

我使用以下脚本执行标题中描述的操作。

    <script type="text/javascript">
              var jump=function(e)
      {
         if (e){
             e.preventDefault();
             var target = $(this).attr("href");
         }else{
             var target = location.hash;
         }

         $('html,body').animate(
         {
             scrollTop: $(target).offset().top
         },1000,function()
         {
             location.hash = target;
         });

      }

      $('html, body').hide();

      $(document).ready(function()
      {
          $('a[href^=#]').bind("click", jump);

          if (location.hash){
              setTimeout(function(){
                  $('html, body').scrollTop(0).show();
                  jump();
              }, 0);
          }else{
              $('html, body').show();
          }
      });
      </script>

它完美无缺。但是我有一个固定的标题，一旦它滚动到它就会覆盖div。我想从所需的滚动目标减去80px。如何修改代码才能执行此操作？

这是一个实时版本。

robertkoh.net/Electrotemp/index.html

点击管道真空系统＆＃39;。它会将您带到产品和服务页面并滚动到相应的部分。正如您所看到的，固定标题涵盖了部分标题。

Answer 1

解决方案1：减去80像素，不要重新设置location.hash

您只需要更改此块：

 $('html,body').animate({
     scrollTop: $(target).offset().top
 }, 1000, function() {
     location.hash = target;
 });

进入以下代码：

 $('html,body').animate({
     scrollTop: $(target).offset().top - 80
 }, 1000);

添加的- 80将减去这80个像素，因此滚动会提前停止。
删除location.hash = target;（在滚动动画完成后调用）修复了跳回旧位置的问题。此代码重新设置了哈希标记，导致浏览器再次向后滚动。但请注意，单击站点内部哈希链接不会再更新URL栏中的哈希值。

解决方案2：将您的网页内容移动到单独的可滚动<div>

创建一个新的<div id="container">，该在</body>之后开始，在$('html,body').animate({之前结束。
将行$('#container').animate({更改为margin-top: 70px;。
从.titlebar移除#container。
为#container { position: fixed; top: 70px; bottom: 0; left: 0; overflow: auto; /* enable scrolling */ }元素添加此CSS：
```
- 80
```

这样做有一些好处：

您不必添加location.hash = target;。
您不必删除{{1}}。
未启用JavaScript的浏览器会跳转到正确的位置。

从另一页减去X距离滚动到特定div

1 个答案: