美文网首页
Vue页面内使用scrollTo滚动至指定id锚点

Vue页面内使用scrollTo滚动至指定id锚点

作者: Frank_Fang | 来源:发表于2023-08-01 11:30 被阅读0次
    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>demo</title>
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <style>
        h3 {
          position: sticky;
          top: 0px;
          z-index: 99;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <el-button type="text" size="mini" @click="scrollto('heading1')">The Genealogy of Jesus Christ</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading2')">The Birth of Jesus Christ</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading3')">The Visit of the Wise Men</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading4')">The Flight to Egypt</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading5')">Herod Kills the Children</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading6')">The Return to Nazareth</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading7')">John the Baptist Prepares the Way</el-button>
        <el-button type="text" size="mini" @click="scrollto('heading8')">The Baptism of Jesus</el-button>
        <div ref="box"
          style="position: relative; width: 600px; border: 1px solid #ddd; height: 85vh; padding: 30px; overflow: auto;">
          <h3 id="heading1">The Genealogy of Jesus Christ</h3>
          <p>1 The book of the genealogy of Jesus Christ, the son of David, the son of Abraham.</p>
          <p>2 Abraham was the father of Isaac, and eIsaac the father of Jacob, and Jacob the father of Judah and his
            brothers, 3 and Judah the father of Perez and Zerah by Tamar, and Perez the father of Hezron, and Hezron the
            father of Ram,1 4 and Ram the father of Amminadab, and Amminadab the father of Nahshon, and Nahshon the father
            of
            Salmon, 5 and Salmon the father of Boaz by Rahab, and Boaz the father of Obed by Ruth, and Obed the father of
            Jesse, 6 and Jesse the father of David the king.</p>
          <p>And David was the father of Solomon by kthe wife of Uriah, 7 and lSolomon the father of Rehoboam, and Rehoboam
            the father of Abijah, and Abijah the father of Asaph,2 8 and Asaph the father of Jehoshaphat, and Jehoshaphat
            the
            father of Joram, mand Joram the father of Uzziah, 9 and Uzziah the father of Jotham, and Jotham the father of
            Ahaz, and Ahaz the father of Hezekiah, 10 and Hezekiah the father of Manasseh, and Manasseh the father of Amos,3
            and Amos the father of Josiah, 11 and nJosiah the father of oJechoniah and his brothers, at the time of the
            deportation to Babylon.</p>
          <p>12 And after the deportation to Babylon: Jechoniah was the father of Shealtiel,4 and Shealtiel the father of
            Zerubbabel, 13 and Zerubbabel the father of Abiud, and Abiud the father of Eliakim, and Eliakim the father of
            Azor, 14 and Azor the father of Zadok, and Zadok the father of Achim, and Achim the father of Eliud, 15 and
            Eliud
            the father of Eleazar, and Eleazar the father of Matthan, and Matthan the father of Jacob, 16 and Jacob the
            father
            of sJoseph the husband of Mary, of whom Jesus was born, who is called Christ.</p>
          <p>17 So all the generations from Abraham to David were fourteen generations, and from David to the deportation to
            Babylon fourteen generations, and from the deportation to Babylon to tthe Christ fourteen generations.</p>
    
          <h3 id="heading2">The Birth of Jesus Christ</h3>
          <p>18 Now the birth of uJesus Christ5 took place in this way. vWhen his mother Mary had been betrothed6 to Joseph,
            before they came together she was found to be with child wfrom the Holy Spirit. 19 And her husband Joseph, being
            a just man and unwilling xto put her to shame, resolved to divorce her quietly. 20 But as he considered these
            things, behold, yan angel of the Lord appeared to him in a dream, saying, “Joseph, son of David, do not fear to
            take Mary as your wife, for that which is conceived in her is from the Holy Spirit. 21 She will bear a son, and
            zyou shall call his name Jesus, afor he will save his people from their sins.” 22 bAll this took place cto
            fulfill what the Lord had spoken by the prophet:</p>
          <p>23 “Behold, the virgin shall conceive and bear a son,<br>
            and they shall call his name eImmanuel”</p>
          <p>(which means, God fwith us). 24 When Joseph woke from sleep, he did as the angel of the Lord commanded him: he
            took his wife, 25 but knew her not until she had given birth to a son. And ghe called his name Jesus.</p>
    
          <h3 id="heading3">The Visit of the Wise Men</h3>
          <p>2 Now hafter Jesus was born in iBethlehem of Judea jin the days of Herod the king, behold, wise men1 from kthe
            east came to Jerusalem, 2 saying, “Where is he who has been born lking of the Jews? For we saw mhis star when it
            rose2 and have come to nworship him.” 3 When Herod the king heard this, he was troubled, and all Jerusalem with
            him; 4 and assembling all the chief priests and scribes of the people, he inquired of them where othe Christ was
            to be born. 5 They told him, “In Bethlehem of Judea, for so it is written by the prophet:</p>
          <p>6 p“‘And you, O Bethlehem, in the land of Judah,<br>
            are by no means least among the rulers of Judah;<br>
            for from you shall come a ruler<br>
            who will qshepherd my people Israel.’”</p>
          <p>7 Then Herod summoned the wise men secretly and ascertained from them what time the star had appeared. 8 And he
            sent them to Bethlehem, saying, “Go and search diligently for the child, and when you have found him, bring me
            word, that I too may come and worship him.” 9 After listening to the king, they went on their way. And behold,
            the
            star that they had seen when it rose went before them until it came to rest over the place where the child was.
            10
            When they saw the star, they rejoiced exceedingly with great joy. 11 And going into the house, they saw the
            child
            with Mary his mother, and they fell down and worshiped him. Then, opening their treasures, rthey offered him
            gifts, gold and frankincense and umyrrh. 12 And vbeing warned win a dream not to return to Herod, they
            departed to their own country by another way.</p>
    
          <h3 id="heading4">The Flight to Egypt</h3>
          <p>13 Now when they had departed, behold, xan angel of the Lord appeared to Joseph in a dream and said, “Rise,
            take
            the child and his mother, and flee to Egypt, and remain there until I tell you, for Herod is about to search for
            the child, to destroy him.” 14 And he rose and took the child and his mother by night and departed to Egypt 15
            and
            remained there until the death of Herod. yThis was to fulfill what the Lord had spoken by the prophet, z“Out of
            Egypt I called my son.”</p>
    
          <h3 id="heading5">Herod Kills the Children</h3>
          <p>16 Then Herod, when he saw that he had been tricked by the wise men, became furious, and he sent and killed all
            the male children in Bethlehem and in all that region who were two years old or under, according to the time
            that
            he had ascertained from the wise men. 17 aThen was fulfilled what was spoken by the prophet Jeremiah:</p>
          <p>18 b“A voice was heard in Ramah,<br>
            weeping and loud lamentation,<br>
            Rachel weeping for her children;<br>
            she refused to be comforted, because they care no more.”</p>
    
          <h3 id="heading6">The Return to Nazareth</h3>
          <p>19 But when Herod died, behold, an angel of the Lord appeared in a dream to Joseph in Egypt, 20 saying, “Rise,
            take the child and his mother and go to the land of Israel, for dthose who sought the child’s life are dead.” 21
            And he rose and took the child and his mother and went to the land of Israel. 22 But when he heard that
            Archelaus
            was reigning over Judea in place of his father Herod, he was afraid to go there, and ebeing warned in a dream he
            withdrew to the district of Galilee. 23 And he went and lived in a city called fNazareth, gso that what was
            spoken
            by the prophets might be fulfilled, that he would be called a Nazarene.</p>
    
          <h3 id="heading7">John the Baptist Prepares the Way</h3>
          <p>3 hIn those days iJohn the Baptist came preaching in jthe wilderness of Judea, 2 k“Repent, for lthe kingdom of
            heaven is at hand.”1 3 For this is he who was spoken of by the prophet Isaiah when he said,</p>
          <p>“The voice of one crying in the wilderness:<br>
            ‘Prepare2 the way of the Lord;<br>
            make his paths straight.’”</p>
          <p>4 Now John wore oa garment of camel’s hair and a leather belt around his waist, and his food was plocusts and
            qwild honey. 5 Then Jerusalem and all Judea and all the region about the Jordan were going out to him, 6 and
            they
            were baptized by him in the river Jordan, rconfessing their sins.</p>
          <p>7 But when he saw many of sthe Pharisees and tSadducees coming to his baptism, he said to them, u“You brood of
            vvipers! Who warned you to flee from wthe wrath to come? 8 Bear fruit xin keeping with repentance. 9 And do not
            presume to say to yourselves, y‘We have Abraham as our father,’ for I tell you, God is able from zthese stones
            to
            raise up children for Abraham. 10 Even now the axe is laid to the root of the trees. aEvery tree therefore that
            does not bear good fruit is cut down and thrown into the fire.</p>
          <p>11 b“I baptize you with water cfor repentance, but dhe who is coming after me is mightier than I, whose sandals
            I
            am not worthy to carry. He will baptize you ewith the Holy Spirit and ffire. 12 His gwinnowing fork is in his
            hand, and he will clear his threshing floor and hgather his wheat into the barn, ibut the chaff he will burn
            with
            junquenchable fire.”</p>
    
          <h3 id="heading8">The Baptism of Jesus</h3>
          <p style="margin-bottom: 100px;">13 kThen Jesus came lfrom Galilee to the Jordan to John, to be baptized by him.
            14 mJohn would have prevented
            him, saying, “I need to be baptized by you, and do you come to me?” 15 But Jesus answered him, “Let it be so
            now,
            for thus it is fitting for us to fulfill all righteousness.” Then he consented. 16 And when Jesus was baptized,
            immediately he went up from the water, and behold, othe heavens were opened to him,3 and he psaw the Spirit of
            God
            descending like a dove and coming to rest on him; 17 and behold, qa voice from heaven said, r“This is my beloved
            Son,4 with whom I am well pleased.”</p>
        </div>
      </div>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        new Vue({
          el: "#app",
          data() {
            return {}
          },
          methods: {
            scrollto(id) {
              const dom = document.getElementById(id)
              if (dom && this.$refs.box) {
                this.$refs.box.scrollTo({
                  top: dom.offsetTop - 20,
                  behavior: "smooth",
                })
              }
            }
          }
        })
      </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:Vue页面内使用scrollTo滚动至指定id锚点

          本文链接:https://www.haomeiwen.com/subject/rewypdtx.html