页面之间的平滑滚动

我想向我的投资组合网站添加一些平滑滚动，以便当您单击某个项目按钮时，它将加载新页面并顺利滚动至项目 - 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

页面之间的平滑滚动

回答

相关问题