單頁網站在錯誤部分中打開

所以我創建了一個使用jQuery平滑滾動導航到網站各個部分的單頁網站。出於某種原因，當我在瀏覽器中打開該頁面時（在多個瀏覽器和計算機上進行過測試），該網站將在頁面中間打開，而不是位於頁面頂部。單頁網站在錯誤部分中打開

這裏是我用來創建平滑滾動的腳本。

這裏是網站

http://usspcatalystcentre.org.uk/

<script> 
    $(function() { 

     function filterPath(string) { 
      return string 
      .replace(/^\//,'') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
      .replace(/\/$/,''); 
     } 

     var locationPath = filterPath(location.pathname); 
     var scrollElem = scrollableElement('html', 'body'); 

     // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
     $('a[href*=#]').each(function() { 

      // Ensure it's a same-page link 
      var thisPath = filterPath(this.pathname) || locationPath; 
      if ( locationPath == thisPath 
       && (location.hostname == this.hostname || !this.hostname) 
       && this.hash.replace(/#/,'')) { 

        // Ensure target exists 
        var $target = $(this.hash), target = this.hash; 
        if (target) { 

         // Find location of target 
         var targetOffset = $target.offset().top; 
         $(this).click(function(event) { 

          // Prevent jump-down 
          event.preventDefault(); 

          // Animate to target 
          $(scrollElem).animate({scrollTop: targetOffset}, 700, function() { 

           // Set hash in URL after animation successful 
           location.hash = target; 

          }); 
         }); 
        } 
      } 

     }); 

     // Use the first element that is "scrollable" (cross-browser fix?) 
     function scrollableElement(els) { 
      for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
       var el = arguments[i], 
       $scrollElement = $(el); 
       if ($scrollElement.scrollTop()> 0) { 
        return el; 
       } else { 
        $scrollElement.scrollTop(1); 
        var isScrollable = $scrollElement.scrollTop()> 0; 
        $scrollElement.scrollTop(0); 
        if (isScrollable) { 
         return el; 
        } 
       } 
      } 
      return []; 
     } 

    }); 
    </script>

在此先感謝，湯姆

來源

2012-06-27 Tom

提出申請刪除您輸入元素autofocus。

Autofocus：

當存在時，它指定一個元件應該自動獲得焦點加載頁面時

上面意味着當一個輸入元件具有自動對焦啓用，則頁面將在頁面加載時向下滾動到該元素，這也是您的情況中的問題。

解釋場景的示例DEMO。

希望它有幫助

來源

2012-06-27 17:33:29 Dhiraj

修復它。非常感謝你 – Tom

單頁網站在錯誤部分中打開

回答

相關問題