Jquery 在页面之间平滑滚动_Jquery_Html_Css

Jquery 在页面之间平滑滚动

jquery html css

Jquery 在页面之间平滑滚动,jquery,html,css,Jquery,Html,Css,我正在尝试添加一些平滑滚动到我的公文包网站，这样当你点击一个项目按钮时，它将加载新页面并平滑滚动到项目-。我发现了这段代码——但是它只允许平滑滚动同一页面上的链接。当我使用此代码时，无论您在导航中单击哪个链接，它都会在现有页面上平滑向下滚动我曾考虑过有一个长页面，上面有很多锚定标签，但这不是要花很长时间才能加载吗有什么想法吗，伙计们非常感谢, 马特我的HTML： <!DOCTYPE HTML> 马特·布莱斯|东伦敦平面设计、网页设计、标志设计和品牌识别马修·布莱斯

我正在尝试添加一些平滑滚动到我的公文包网站，这样当你点击一个项目按钮时，它将加载新页面并平滑滚动到项目-。我发现了这段代码——但是它只允许平滑滚动同一页面上的链接。当我使用此代码时，无论您在导航中单击哪个链接，它都会在现有页面上平滑向下滚动

我曾考虑过有一个长页面，上面有很多锚定标签，但这不是要花很长时间才能加载吗

有什么想法吗，伙计们

非常感谢,

马特

我的HTML：

<!DOCTYPE HTML>


马特·布莱斯|东伦敦平面设计、网页设计、标志设计和品牌识别
马修·布莱斯投资组合


美味熟食店
品牌+网站
吉姆咖啡馆
标志设计
咖啡革命
活动海报
威尔顿大道咖啡馆
标志设计
哈利根
演出海报
马丁+乔
结婚请柬
狗+衣柜
竞选材料
早年
演出海报
哈利根
相册艺术品
半黑猩猩
演出海报

版权所有Matthew Bryce Design

好的，您可以使用网站中给出的相同逻辑来平滑滚动。加载文档时，您可以检查页面中是否存在

，如果是，请将页面平滑滚动到元素的

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

或者
我认为您需要做的是，当新页面加载时，找到它与页面顶部的距离，然后使用以下jquery：
$('body').animate({
    'scroll-top': distance from top
});

如果您有一个干净的URL系统，页面之间的锚定链接如下所示：
<a href="index#someId">someId</a>

谢谢Praveen-我已经在index.html的头部包含了这段代码，并将代码粘贴到smooth-scroll.js中，但它不起作用。我刚刚加入了上面的HTML，如果有帮助的话？非常感谢。请你做一把小提琴好吗？没有，我想我知道你的问题
$(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);
});

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

<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);
      }
  })
});