頁面之間的平滑滾動

我想向我的投資組合網站添加一些平滑滾動，以便當您單擊某個項目按鈕時，它將加載新頁面並順利滾動至項目 - http://www.mattdbryce.co.uk/。我發現這個代碼 - http://css-tricks.com/snippets/jquery/smooth-scrolling/ - 但是，只允許在同一頁面上的鏈接平滑滾動。當我使用此代碼時，無論您在導航中單擊哪個鏈接，它都會在現有頁面上平滑滾動。頁面之間的平滑滾動

我認爲有一個很長的頁面有很多的錨點標籤，但不會永久加載？

任何想法傢伙？

非常感謝，

馬特

我的HTML：

<!DOCTYPE HTML>

<head> 
    <!--web fonts--> 
    <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono:400italic,700italic' rel='stylesheet' type='text/css'> 
    <!--end web fonts--> 

    <meta charset="UTF-8"> 

    <title>Matt Bryce | East London Graphic Design, Web Design, Logo Design and Brand Identity</title> 

    <!--css files--> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/text.css"> 
    <link rel="stylesheet" href="css/960_24_col.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <!--End css files--> 

    <!--JS--> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/smooth-scroll.js"></script> 
    <!--END JS--> 

    <!--favicon--> 
    <link rel="shortcut icon" href="favicon.png"> 
    <!--End favicon--> 


</head> 

<body> 
<div class="shadow"> 
    <div class="container_24"> 
     <header> 
      <h1 class="clearfix"><a href="index.html">Matt Bryce</a></h1> 
      <div id="title"><h2>Matthew Bryce Portfolio</h2></div> 
      <nav> 
       <ul> 

        <li><a href="mailto:[email protected]"><img src="img/contact.png" alt="Contact"/></a></li> 


       </ul> 
      </nav> 

     </header>

 <div class="portfolio-nav"> 

      <div class="grid_4"> 
       <h3><a href="good-taste.html#project-top"><img src="img/good-taste-button-1.png" alt="Good Taste Delicatessen - Branding + Website"></a>Good Taste Delicatessen</h1> 
        <p>Branding + Website</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="jims-cafe.html#project-top"><img src="img/jims-cafe-button-1.png" alt="Jim's Cafe - Logo Design"></a>Jim's Cafe</h1> 
        <p>Logo Design</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="coffee-revolution.html#project-top"><img src="img/the-coffee-revolution-button-1.png" alt="The Coffee Revolution - Events Poster"></a>The Coffee Revolution</h1> 
        <p>Events Poster</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="wilton-way.html#project-top"><img src="img/wilton-way-cafe-button-1.png" alt="Wilton Way Cafe - Logo Design"></a>The Wilton Way Cafe</h1> 
        <p>Logo Design</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="halligan-poster.html#project-top"><img src="img/halligan-poster-button-1.png" alt="Halligan - Gig Poster"></a>Halligan</h1> 
        <p>Gig Poster</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="mj-wedding.html#project-top"><img src="img/martyn-and-jo-button-1.png" alt="Martyn + Jo - Wedding Invitiations"></a>Martyn + Jo</h1> 
        <p>Wedding Invitation</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="dog-and-wardrobe.html#project-top"><img src="img/the-dog-and-wardrobe-button-1.png" alt="The Dog + Wardrobe - Campaign Material"></a>The Dog + Wardrobe</h1> 
        <p>Campaign Material</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="early-years.html#project-top"><img src="img/the-early-years-button-1.png" alt=""></a>The Early Years</h1> 
        <p>Gig Poster</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="halligan-album.html#project-top"><img src="img/halligan-album-button-1.png" alt="Halligan - Album Artwork"></a>Halligan</h1> 
        <p>Album Artwork</p> 
      </div> 

      <div class="grid_4"> 
       <h3><a href="part-chimp.html#project-top"><img src="img/part-chimp-button-1.png" alt="Part Chimp - Gig Poster"></a>Part Chimp</h1> 
        <p>Gig Poster</p> 
      </div> 

     </div>

 <footer><p>Copyright Matthew Bryce Design</p></footer> 

    </div> <!--end container--> 
</div> 
    <!--JQuery--> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <!--Include plugin--> 

    <!--hook it up--> 

</body>

來源

2013-10-13 mattdbryce

請你可以讓小提琴http://jsfiddle.net – Hive7

http://jsfiddle.net/y7FLs/這是否有幫助？ – mattdbryce

不，雖然我想我知道你的問題 – Hive7

好吧，你可以使用在CSS Tricks網站給予平滑滾動相同的邏輯。在加載文檔時，您可以檢查頁面中是否存在#，如果是這種情況，請將頁面平滑滾動到元素的top。

$(window).on("load", function() { 
    var urlHash = window.location.href.split("#")[1]; 
    if (urlHash.length > 0) 
     $('html,body').animate({ 
      scrollTop: $('#' + urlHash).offset().top 
     }, 4000); 
});

或者，

$(document).ready(function(){ 
    var urlHash = window.location.href.split("#")[1]; 
    if (urlHash.length > 0) 
     $('html,body').animate({ 
      scrollTop: $('#' + urlHash).offset().top 
     }, 4000); 
});

來源

2013-10-13 14:15:25

感謝Praveen - 我已經在index.html的頭部添加了這段代碼 - ，並將代碼粘貼到smooth-scroll.js但它不起作用。如果有幫助，我剛剛包含了上面的HTML代碼。謝謝！ – mattdbryce

我認爲你需要做的是，當新頁面加載發現這是從頁面頂部的距離，然後使用這個jQuery：

$('body').animate({ 
    'scroll-top': distance from top 
});

來源

2013-10-13 15:02:53 Hive7

頁面之間的平滑滾動

回答

相關問題