链接并滚动到部分

时间:2018-02-20 14:09:55

标签: javascript html

在有人发表评论之前,已经多次询问过这个问题,是的,但是,无论我找到的解决方案都没有找到我需要的工作。

我有这样的导航:

link 1 (/link1/)
- sub link 1 (/link1/#sublink1)
- sub link 2 (/link1/#sublink2)

link 2
- sub link 1 (/link2/#sublink1)
- sub link 2 (/link2/#sublink2)

顶级链接链接到网站上的其他页面,子级别链接是该页面内部分的锚点。我试图在用户所在的页面上单击子链接时,以及在单击另一个页面的子链接时(浏览器应加载其他页面然后向下滚动)时,平滑滚动到某个部分。目前我只能得到一个或另一个工作 - 而不是两个。

方法1 (在点击其他页面上的子链接时有效 - 浏览器加载另一个页面然后向下滚动,但在用户已经在的页面的子链接上不起作用)

jQuery('body, html').animate({
   scrollTop: jQuery(window.location.hash).offset().top
}, 1300)

方法2 (与方法1完全相反) //确保this.hash在覆盖默认行为之前有一个值

if (this.hash !== "") {

        // Store hash
        var hash = window.location.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        jQuery('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 1300, function(){

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
        });
    } // End if

我基本上需要将这两种方法结合起来,以便平滑滚动在所有情况下都能正常工作,但我不知所措!有什么想法吗?

2 个答案:

答案 0 :(得分:1)

原来我必须做这样的事情:

var hash = window.location.hash;
    var cleanHash = hash.replace("-st", "");
    var currPath = window.location.pathname;

   if (hash !== null && hash !== '')
        jQuery('body, html').animate({
            scrollTop: jQuery(cleanHash).offset().top
        }, 1300);

    $("a").on('click', function(e) {
        e.preventDefault();
        var linkPath = $(this)[0].pathname;
        var href = $(this).attr('href');
        var linkHash = href.substr(href.indexOf("#"));
        var cleanLinkHash = linkHash.replace("-st", "");

        if(linkPath !== currPath){
            window.location.href = href;
        } else {
            $('html, body').animate({
                scrollTop: $(cleanLinkHash).offset().top
            }, 800, function(){
                window.location.hash = cleanLinkHash;
            });
        }
    });

它很漂亮,需要改进,但它适用于我的情况。重要的部分是检查链接的路径是否等于当前页面,然后使用不同的滚动方法。

答案 1 :(得分:1)

我会这样做

x <- c(-1, 0, 1, 2, 3)

replace(x, x < 1,1)
# [1] 1 1 1 2 3