stackoom
  简体   繁体   中英

How to auto scroll to target div if an id exists within body?

 原文  2016-10-11 17:02:07  7   3    javascript/ jquery/ html/ css

Question

Consider i have a full screen slider on my website, when clicking on navigation menus its really annoying to scroll down every time you visit a page or a refresh.

So lets Say i have a structure like:

<body page-section="news">

    <div class="royalslider">
        This is a slider and it is fullscreen
    </div>

    <div id="body-layouts">
        This is the body layout
    </div>

</body>

How do i go about auto scroll to body-layouts div if page-section="news" attribute exists within body?

More information: Visit this website http://unionstationdenver.com/ you will notice that when clicking on navigation's, you're automatically scrolled down to the targeted divs :)

3 answers

solution1
 2 ACCPTED  2016-10-11 17:06:33

Try this:

With 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";
}

With jquery :

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

With multiple attributes:

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

solution2
 0  2016-10-11 18:12:19

Here is a short example of using scrollTo plugin to specific divs on the page using jQuery. ID is passed to function, replaced ( newsOneLink -> newsOne ) and then scrolls to the corresponding div, avoiding ID's that already exist. If you want to add more just make sure Link is appended at the end of the id only for the <a> tag. 

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

solution3
 0  2016-10-11 18:13:22

Since you are okay with jQuery I would suggest the following to run when the document is ready. This will work with an offset modification or not.

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to auto scroll text within div depending on width of DIV Not directing to div id target when scroll How to target a div with a same ID Target container is not a DOM element, already have div id in the body How to auto scroll (animate) a <div> with text, with overflow set to auto or scroll? How to scroll to an ID inside a div? How to smooth scroll to div id? How to scroll to a div id in GWT How to make auto scroll to top of the div? How to animate scroll position of div with overflow: auto?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM