页面之间平滑滚动答案

【问题标题】：smooth scrolling between pages页面之间平滑滚动
【发布时间】：2013-10-13 14:13:22
【问题描述】：

我正在尝试向我的投资组合网站添加一些平滑滚动，这样当您单击项目按钮时，它将加载新页面并平滑滚动到项目 -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:info@mattdbryce.co.uk"><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>

【问题讨论】：

请你做个小提琴jsfiddle.net
jsfiddle.net/y7FLs 这有帮助吗？？
不，虽然我想我知道你的问题

标签： jquery html css

【解决方案1】：

好的，您可以使用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);
});

【讨论】：

感谢 Praveen - 我已包含此代码 - - 在 index.html 的头部并将您的代码粘贴到smooth-scroll.js 但它不工作。如果有帮助，我刚刚包含了上面的 HTML？谢谢！

【解决方案2】：

我认为你需要做的是当新页面加载时找到它与页面顶部的距离然后使用这个jquery：

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

【讨论】：

【解决方案3】：

如果您有一个干净的 URL 系统并且页面之间的锚链接如下所示：

<a href="index#someId">someId</a>

你可能想看看下面的代码：

$(document).ready(function() {  
  $('a[href*=\\#]').on('click', function(e){
      e.preventDefault();
      var fullTargetLink = this.href;
      var targetLink = fullTargetLink.substr(0, fullTargetLink.indexOf('#'));
      var fullCurrentLink = window.location.href;
      if (fullCurrentLink.indexOf('#') > -1) {
          var currentLink = fullCurrentLink.substr(0, fullCurrentLink.indexOf('#'));
      }else{
          var currentLink = fullCurrentLink;    
      }
      if (targetLink !== currentLink){
          window.location.href = fullTargetLink;
      }else{
          $('html, body').animate({
              scrollTop : $(this.hash).offset().top
          }, 500);
      }
  })
});

【讨论】：