CSS/HTML만으로 페이지 상단으로 부드럽게 스크롤 하시겠습니까?

나는이 사이트에 Jquery/Javascript를 추가 할 수 없으므로 "Back to Top"버튼을 사용하여 CSS/HTML로만 전환하는 방법을 찾고있었습니다 .... don ' 그것이 가능하다고 생각하지만 누구도 해결책을 찾지 못했는지 확인합니다.CSS/HTML만으로 페이지 상단으로 부드럽게 스크롤 하시겠습니까?

출처

2013-05-03 user2250423

일반 자바 스크립트는 어떻습니까? – Ejaz

CSS는 그렇게 할 수 없습니다. – DaoWen

적어도 j 없이는 가능하지 않습니다. –

부드러운 스크롤이 아니지만 페이지의 모든 부분에 링크하기 위해 앵커 태그를 사용할 수 있습니다. 다음은 W3 학교의 예입니다. 그래서 내가이 질문에 게시 것이라고 생각 smooth scrolling에 흥미로운 링크를 발견 :

<!DOCTYPE html> 
<html> 
<body> 

<h2><a id="top">There is a link at the bottom of the page!</a></h2> 

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> 
<p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p> 
<p>He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought-frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.</p> 
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p> 

<a href="#top">Go to top</a> 
</body> 
</html>

은 기본적으로 HREF는

UPDATE로 이동하는 앵커를 결정하기 위해 CSS 선택기를 사용합니다.

출처

2013-05-03 23:46:50 aaronman

이 솔루션에 동의하지만 설명 할 코드를 추가하십시오. +1 – SaidbakR

@threeFourOneSixOneThree nice이 질문은 js 없이는 idt가 OP가 다시 받아 들여졌습니다. – aaronman

알고있는 한 CSS 만 사용하여 원활한 페이지 전환을 수행 할 수있는 방법이 없습니다. aaronman으로 명시된 바와 같이 id이라는 HTML 속성을 사용하면 페이지의 다른 위치로 이동할 수 있습니다. 당신은 당신이 그런 어딘가에 페이지에서이 점프 할 수있는 앵커 태그를 사용할 수 있습니다

<h1 id="whatever">Jump to me</div>

을 원하는 요소를 될 수있는 ID를 제공합니다.

<a href="#whatever">Jump to "Jump to me"</a>

Fiddle

이 작동하는 방법은 CSS에서 요소를 대상으로 매우 유사하다. ID를 사용하여 타겟팅하면 href이 표시됩니다. 목차와 같은 프로젝트에 유용합니다. 목차와 같은 항목을 만들고 섹션으로 건너 뛰었 음을 보여주고 싶다면 :target 의사 클래스를 사용하여이를 수행 할 수 있습니다. Here은 매우 기본적인 예입니다.

a의 href을 #으로 지정하면 이동할 요소없이이 작업을 수행 할 수 있습니다. 그러면 페이지 상단으로 바로 이동합니다. 페이지의 <html>은 id이 # 인 것과 거의 같습니다. CSS를 통해 페이지의 상단으로 이동하기 위해

Fiddle

출처

2013-05-04 02:42:23

, 당신은 CSS를 변경하는 트리거의 어떤 종류를 추가해야합니다. AFAIK는 HTML 인라인 JavaScript 트리거 또는 자바 스크립트의 EventListeners를 통해서만 가능합니다.

그러나 앵커 (href=#the_id_of_an_element) 설정을 통해 페이지의 한 지점으로 이동할 수는 있지만 부드럽 지 않고 순간적입니다.

이제는 페이지의 맨 위 또는 오히려 요소의 시작 부분으로 부드럽게 스크롤 할 수 있었지만 CSS 만 사용하면 약간의 불안한 부작용이있었습니다. 하지만 코드를 공유하고 처음부터 다른 사람에게 도움이되는지 확인하거나 다른 문제가 있는지 확인합니다.

/* 
 
\t KNOWN ISSUES 
 
\t 
 
\t - requires constant user input. 
 
\t Either through hover or buttonpress 
 
\t \t -> If an element would be triggered, they cannot be untriggered. CSS is not made for this. 
 
\t 
 
\t - moves the page 
 
\t Well, what did you expect? CSS visualises the page. You can only move 
 
\t the page through the CSS by editing visual content and making the page smaller, 
 
\t basically forcing the client to move the user. 
 
\t \t -> this also means that elements below the element are shown in the view 
 
\t \t -> it is VERY visible, especially if you look at the scrollbar 
 
\t \t 
 
\t - has a delay depending on where the user is at 
 
\t The animation has to reach the position of the user, basically. 
 
\t \t 
 
\t At least it works on IE? 
 
\t But honestly, just use javascript to scroll to. It's literally an one-liner 
 
*/ 
 

 
/* Transition types. Fairly universal available in browsers*/ 
 
.smooth-transition { 
 
\t -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.slow-transition { 
 
    -webkit-transition: all 1.5s ease; 
 
    -moz-transition: all 1.5s ease; 
 
    -ms-transition: all 1.5s ease; 
 
    -o-transition: all 1.5s ease; 
 
    transition: all 1.5s ease; 
 
} 
 
/* End of transition types */ 
 

 
.bottom { 
 
\t position: fixed; 
 
\t /*Position wherever, just know that you can set sizes using these*/ 
 
\t bottom: 0px; 
 
\t height: 40px; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t 
 
\t z-index: 10; 
 
} 
 

 
/* 
 
\t Settings for the transitions 
 
\t 
 
\t On active (which is click), the animation makes sure the page is made smaller, so 
 
\t the top is shown again. This also causes the user to be moved upwards 
 
\t 
 
\t After that animation, the page is restored in size. 
 
*/ 
 
#move:active ~ .mover, 
 
#move:focus:hover ~ .mover { 
 
\t height: 0px; 
 
} 
 

 
#move:after { 
 
\t content: "Back to top"; 
 
} 
 

 
#move:focus:after { 
 
\t content: "Hover to go up"; 
 
} 
 

 
/* 
 
\t The element that holds all the data 
 
\t It's required for this element to also be at the end of the page, 
 
\t otherwise the user will be moved upwards, but also with the end 
 
\t of the page in sight. (This can be tweaked with the min-height 
 
\t settings though. Height - height of whatever is beneath it, but 
 
\t the user will still see the other elements) 
 
*/ 
 
.mover { 
 
\t /* 
 
\t \t Min-height here is the amount of spacing between the element and 
 
\t \t the top of the HTML page. In most cases, this is 100%, but if the 
 
\t \t element is contained, then this min-height trick might not work 
 
\t \t 
 
\t \t Just make sure that the min-height amount is the same as the visual 
 
\t \t page size, and NOT its contents or its parent. 
 
\t */ 
 
\t min-height: 100%; 
 
\t /* 
 
\t \t Set to your div height. Unfortunately, animations from auto to 
 
\t \t 0px are not supported (yet?), and there's no real good trick 
 
\t \t as a placeholder for this one. You could mess around with 
 
\t \t max-height, but remember that this can cause a delay in animation 
 
\t \t and creates differences in speed that are hard to tweak or measure. 
 
\t */ 
 
\t height: 1400px; 
 
\t 
 
\t /* 
 
\t \t In order to move the page, you'll have to suppress the content 
 
\t \t that will be shown outside of the element. Ergo, hide the overflow. 
 
\t */ 
 
\t overflow: hidden; 
 
} 
 

 

 

 

 

 
/* To make the example element look pretty*/ 
 
#move:hover { 
 
\t color: whitesmoke; 
 
\t background-color: rgb(30,30,30); 
 
} 
 

 
#move { 
 
\t background-color: rgb(50,50,50); 
 
\t border-radius: 2px; 
 
\t text-align: center; 
 
\t line-height: 40px; 
 
\t color: lightslategrey; 
 
\t text-decoration: none; 
 
} 
 
/* 
 
\t End of pretty CSS 
 
*/

<link rel="stylesheet" href="test.css"> 
 
<html> 
 
<h1>Welcome at the top</h1> 
 
<a id="move" class="bottom" ></a> 
 
<div class="mover slow-transition"> 
 
\t <p>Lorem ipsum dolor sit amet, movet soleat nullam an mei, ne mei ullum errem viris. Mea et esse nullam. No sit accumsan tacimates evertitur. Et sea mutat postea. 
 
Summo numquam eu vix, vix populo denique suscipit no. Laudem elaboraret ei cum. Cetero quaeque oporteat pri in, pro simul persius an, mei in quis iriure molestie. Vix simul sententiae suscipiantur in, qui errem phaedrum mediocrem ex, ei mea commune interpretaris. 
 
Id ius sumo choro accumsan. No qui facete fuisset noluisse, cum meis periculis hendrerit ut. His no quem malis minimum, veri posse abhorreant te eos, no ignota aperiam vocibus mei. Pro ex phaedrum maiestatis, an mei appareat adversarium. Pro ne atomorum consequuntur, velit viderer ei eam, vim luptatum adolescens id. Lucilius periculis ex eos, nullam laboramus his ex. 
 
Ex eius deseruisse persequeris eos, ut mea enim mutat efficiendi, nam magna rebum labore ad. Ut verear maiorum nam, per an nibh maluisset. Quas viderer no vix, ut tantas molestiae aliquando vel, ne eam nibh mandamus. Mel ad sensibus tractatos, vim cu timeam explicari. Te duo choro option labores, ius principes ullamcorper cu. 
 
Ei vis alienum corrumpit, ea has vero volutpat. Sit lobortis percipitur scripserit eu. Cu mea putent detraxit, mel purto eruditi contentiones in, et urbanitas honestatis sit. Quod numquam accusata et vim. Discere expetenda in per. Sit eu dolor persius, virtute repudiandae eum et. 
 
Ne vix lobortis constituam, cum dicant iisque hendrerit cu. Scribentur efficiantur ex sed, pri ex congue tollit lobortis, vix affert aliquip tractatos at. Hinc esse legimus sit at, accusata hendrerit expetendis ex eum. Vide civibus sed at, et has ridens dictas noluisse. 
 
His philosophia comprehensam cu, omnium abhorreant usu cu, ne quo vero eius consetetur. In cum nusquam pericula. Luptatum electram nec et, purto perpetua pri eu, an pri minim adolescens. Ex vel causae omittam, te vis semper patrioque, nec prima quaestio an. Ferri admodum definitionem est no, eu etiam tritani scriptorem eum. 
 
Nam cu viris dictas eleifend, has an idque abhorreant, sed id choro inciderint reprehendunt. Pri putant aliquid intellegat at. Cibo discere at sed, id elitr nonumy has. Cu nam magna similique. Ex duis debet discere mei. 
 
An pri partem delenit mnesarchum, ut nam honestatis reformidans. Cum no dicta verterem referrentur, sit ad dolore laboramus, docendi adipisci ad eos. Porro voluptaria mea at, feugait mnesarchum usu no. Essent nostro vituperata eam ut, dicat nemore maiestatis id est. In nec solum volumus detracto, ne vis scriptorem delicatissimi. Ea saepe similique vel. 
 
Et bonorum molestiae sed, legere latine detracto duo at, per te alterum signiferumque. Novum regione civibus at pri, sit no debet phaedrum. Vis elitr nominati id, his justo soleat te, cum ut modus iusto qualisque. Nostro intellegat mei ei. Ea quo eleifend vituperata, sea at persius molestie pericula, ut vis melius molestie. Dolorem corrumpit vix ut, qualisque definiebas ea mea. 
 
Cu quo solet cetero posidonium, ut sed erat utroque, est nostro explicari euripidis eu. Oratio deserunt his ad, verterem complectitur conclusionemque ne quo, vim imperdiet complectitur te. No invenire gloriatur has. Legimus accumsan eu mea. Cu pri nonumes eleifend salutandi. 
 
Qui ei fugit cetero. Vis convenire interpretaris ex, cu vel patrioque assueverit dissentiet. Clita commune perpetua vel ex, te salutandi liberavisse interpretaris vix, te vide dictas invidunt mel. Mel id qualisque conclusionemque. Prima fabellas dignissim vim id, cum at elit luptatum concludaturque. Vix ex modus dolores voluptua. 
 
No vis velit soluta nonumes, erant officiis tractatos vix id. In nam justo delicata, ridens sadipscing per eu. Vel solet melius in. At novum inermis atomorum est, ius no malorum nominati, no consulatu interpretaris mediocritatem eos. 
 
At quis integre liberavisse eam. Modo eirmod ius ea. Posse omnes interpretaris cu cum. Ad audire vivendo quo. Et sed zril vidisse. Quo deleniti electram et, ex has accusam detraxit elaboraret. 
 
Instructior deterruisset qui at. Dictas aeterno epicuri id cum, his nostro labores comprehensam ei. Nam cu vitae facilisis, no est scripta alienum tincidunt. Duo adhuc mazim lucilius at. Cu tacimates facilisis sed. 
 
Ne rationibus referrentur pro, aliquip omittam id eam. Nec atqui noster persequeris ea. An clita dicunt sed, mea cu facer nulla prompta, ancillae fabellas vel eu. Mei ei utroque eligendi torquatos, nam ut omnes integre adversarium, mea ad omnes euripidis. 
 
Essent invenire cu nec, sit cu commodo efficiendi. Ex sed dico causae. Wisi urbanitas cu eum. Laboramus efficiendi no sed, justo latine albucius ad eum. Pro eros euripidis id. Sit cetero aliquam delicata an, duo cu tota delenit. 
 
Quo regione reformidans an, in dicit antiopam qui, omnis percipitur eum ad. Esse unum moderatius quo an, sanctus imperdiet elaboraret pro ex. Per fuisset mentitum ex. Ea pri saepe evertitur disputando. Audire maiorum consetetur no pri, his an eirmod honestatis. 
 
Pro case mazim in, eos no esse graeco causae, quo liber prodesset deterruisset at. Cu agam ceteros reprehendunt pri. Pro ne agam fugit, assum putent te nam. Cum libris facilisi eu, suas nemore cu sed. Id option vivendum pro. In duo soleat ceteros detracto, qui cu quem officiis, eam eu solet audire dissentiunt. Te vis dicunt civibus placerat, quem cetero ne vix. 
 
Fierent periculis at mel, viris eirmod constituam in eum. Cum diam consectetuer ea. Duo purto pertinax petentium in, ex veri atomorum consetetur pro. Ne eos equidem dolorem epicuri, sed prima consulatu in. Erat invidunt legendos ex duo. Ius suas principes dissentias an, eu vel dicat adipisci ocurreret. Ut summo dictas appellantur vis. 
 
Nec ad nobis tritani molestiae. Ei vis erant corrumpit comprehensam. Has ad vero quaeque corpora, volumus ullamcorper eos ut. Saepe explicari per in, ceteros iracundia vituperata ea eos. Duo cu autem partem facilisi, eum at munere complectitur. 
 
Cu nam virtute fabulas graecis, graece complectitur in est. Cum quot imperdiet ut. Et est consul dolorem theophrastus. Mazim delicatissimi eos ad. No quo dicat insolens consetetur, idque aliquando vis in, his et minimum deleniti. In modus petentium eum, id graece everti vim. Ut vocibus praesent est, cu pri modo vivendo consetetur, inani vocent antiopam usu et. 
 
Ne est recusabo democritum, dicat melius noluisse ex sea. Mea ad posse atomorum, in sed facilis concludaturque. No veri sonet mel. Ornatus delenit an qui, usu te saepe utinam vivendum, idque urbanitas pro ex. Quo ludus erroribus ea. Ea saperet atomorum honestatis sit. Eu essent impedit deseruisse ius, ex dicit mandamus his, eu mel prompta qualisque necessitatibus. 
 
Pri solet probatus at. Quo sint alienum ne. Reque malis sonet id mel, has enim mundi alienum.</p> 
 
</div> 
 
</html>

당신은 문제가 무엇인지 이해할 수 있도록 제가 CSS에 추가 코멘트를 읽을 수 있는지 확인하고 파일 수단에 무엇을 모든
. 하지만, 나는 입니다. 당신은 거의 즉시 부작용 중 하나에 주목할 것입니다.

출처

2017-03-28 14:08:11

CSS/HTML만으로 페이지 상단으로 부드럽게 스크롤 하시겠습니까?

답변

관련 문제