Question

想要完全去往另一个页面的内部链接做什么！但是通过jquery。不能使用常规外部跳转作为使用视差滚动，这对于那样的跳跃并不顺利。

对于内部链接，我使用了类似的东西 -

    $(function() {
    $("#clickNews").click(function(e){
        e.preventDefault();
        $('html,body').animate({scrollTop: 2400}, 1500);
    }); 
});

但是如何执行重定向后跟animate（）？

我想点击页面上的一个锚点...到达另一个页面的某个scrollTop

有这样的方式 - ＆gt;＆gt;

$("#clickCatalog").click(function(e){
    e.preventDefault();
    window.location = '/ABC/';
    window.load(function(){
    $('html,body').animate({scrollTop: 0}, 1500);  
    });
});

Answer 1

请参阅动画功能的文档 http://api.jquery.com/animate/

您可以传递一个将重定向为第四个参数的函数，也可以使用带有'complete'键的函数作为值传递选项对象

类似的东西：

$(function() {
    $("#clickNews").click(function(e){
        e.preventDefault();
        $('html,body').animate({scrollTop: 2400}, {
           duration: 1500,
           complete: function() {
              window.location = '{url}';
           }
        });
    }); 
});

Answer 2

你可以做的最接近的事情是通过ajax加载你想要的页面，加载到一个元素中。

有些事情：

$('a.internal').click(function(event){ //Put class="internal" to load with ajax...
   event.stopPropagation();
   event.preventDefault();
   var newPage = $('<div class="page"></div>');
   var oldPage = $('.page');
   newPage.css('opacity',0);
   oldPage.animate({opacity:0, top: -5000 }, {
     complete: function(){
        newPage.animate({opacity:1});
     }
   }
   newPage.load('http://localhost/myNewPage.html body >');
   $('body').append(newPage).animate({'scrollTop':0});

});

请注意，它未经测试但应该有效。

编辑：修正了一些拼写错误

Answer 3

您也可以使用localStorage执行此任务。我尝试了一次，它对我有用。我在导航标签中使用了这个，这就是我将元素id传递给localStorage的原因。

$('#block li').click(function (){
    //get the clicked element's id. eg:- id='1'
    var menu_selector = $(this).attr('id');
    //store the value into localStorage
    localStorage.setItem('selector', menu_selector);
    //do the redirection
    window.location.replace("/about");
});

//if localStorage is not empty  
if(localStorage.getItem('selector') != 'undefined' && localStorage.getItem('selector') != null) {
    // get the stored values
    var selector = localStorage.getItem('selector');

    //I'm asuming, my destination is <div id="destination-1"></div>
    var destination = $('#destination-'+selector);

    //now do the scrollTop
    $('html, body').animate({
        scrollTop: destination.offset().top - 50
    }, 700);

    //distroy the local storage
    window.localStorage.clear();
});

另请注意，这不适用于非常旧的浏览器。

Answer 4

哦，男孩！这是一个愚蠢的问题。问题是真实的，但是问的方法很愚蠢。我什至不记得当时我做了什么。但是现在我可能会像这样重定向它：

window.loation.href = '/link/?scroll=top'

在目标页面上，我将仅检查像这样的查询字符串并应用scrolltop动画：

var urlParams = new URLSearchParams(window.location.search);
if(urlParams.get('scroll') == 'top'){
    $("html, body").animate({ scrollTop: 0 }, 1000);
}

感谢您的所有回答。

重定向到其他页面然后动画以达到某个scrollTop

4 个答案: