Question

考虑到我的网站上有一个全屏滑块，当点击导航菜单时，每次访问页面或刷新时都会向下滚动。“

所以，让我说我的结构如下：

$questionsandanswers = array(
"What is 1 plus 1?",
"2",
"What is 2 plus 2?",
"4",
);

foreach ($questionsandanswers as $qa) {
    echo $qa . "\n";
    $handle = fopen ("php://stdin","r");
    $line = fgets($handle);
    if ($line) {
        echo $qa . "\n";
        fclose($handle);
    }
}

如果 page-section =“news”属性存在于正文中，我如何自动滚动到正文布局 div？

更多信息：访问此网站http://unionstationdenver.com/您会注意到，当您点击导航时，您会自动向下滚动到目标div：）

Answer 1

试试这个：

使用js vanilla：

// first you get the the value of page-section
var section = document.querySelector("body").hasAttribute("page-section");
// after you check the value
if(section == "news") {
// if it is ok, you redirect
    location.href = "#body-layouts";
}

使用jquery：

var section = $("body").attr("page-section");
if(section == "news") {
    location.href = "#body-layouts";
}

具有多个属性：

var attr1 = $("body").attr("page-section1");
var attr2 = $("body").attr("page-section2");
var redirection = "";
if(attr1 == "news") {
    redirection = "something";
} else if(attr2 == "something") {
    redirection = "something"; 
}

$('html, body').animate({
    scrollTop: $( $(redirection) ).offset().top - NAVBARHEIGHT
}, 0);

Answer 2

这是使用jQuery在页面上使用scrollTo插件到特定div的简短示例。 ID传递给函数，替换（newsOneLink -> newsOne），然后滚动到相应的div，避免已经存在的ID。如果您想添加更多内容，请确保仅在Link代码的ID末尾附加<a>。

＆＃13;

function goToByScroll(id){
        // Reove "Link" from the ID
        id = id.replace("Link", "");
        $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
            'slow');
    }

    //Change slow to a number to change the animation speed

    $("#links > a").click(function(e) { 
        e.preventDefault(); 
        //Now go to function to scroll to div
        goToByScroll($(this).attr("id"));           
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="container">
        <div id="links">   
                <a id = "newsOneLink" href="#">News One</a>
                <a id = "newsTwoLink" href="#">News Two</a>
                <a id = "newsThreeLink" href="#">News Three</a>
        </div>
        <div id="content">
            <div id="newsOne">
                <p class="header">News One</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>       
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>           
            <div class="sections"id="newsTwo">
                <p class = "header">News Two</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>   
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="sections" id="newsThree">
                <p class = "header">News Three</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

＆＃13;

Answer 3

由于你对jQuery没问题，我建议在文档准备好后运行以下内容。这将适用于偏移修改。

$(function() {
    function scrollTo(hash, offset) {
        if(typeof offset === 'undefined') {
            offset = 0;
        }
        $('html, body').animate({ scrollTop: $('#' + hash).offset().top + offset }, 'slow');
        return false;
    }
    var section = $("body").attr("page-section");
    if(section && section === "news") {
        scrollTo("body-layouts");
        // scrollTo("body-layouts", -65);
    }
});

如果身体内存在id，如何自动滚动到目标div？

3 个答案: