网址中的ID和锚链接无法滚动到锚

时间:2018-06-27 07:21:31

标签: html

我需要在URL中添加一个ID并滚动到锚链接

export default {
    data() {
      return {
        errors: [],
        videos: [],
        items: []

      }
    },

    methods: {
      idvideo: function() {
        const data = this.items
        const result = data.map((item) => {
          return {
            fetchId: item.snippet.resourceId.videoId
          };
        }).sort((a, b) => b.count - a.count);

        var i, len, text;
        for (i = 0, len = result.length, text = ""; i < len; i++) {
          text += result[i].fetchId + ",";
        }
        var x = text.slice(0, -1);
        return(x);
      }

    // Fetches posts when the component is created.
    created() {

      // Ini adalah API utk playlist yang dipilih
      axios.get("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLjj56jET6ecfmosJyFhZSNRJTSCC90hMp&key={YOUR_API_KEY}")
      .then(response => {
        // JSON responses are automatically parsed.
        this.items = response.data.items

        // Ini adalah API utk data yang dipilih
      axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key={YOUR_API_KEY}&id='+this.idvideo())
    .then(response => {
        // JSON responses are automatically parsed.
      this.videos = response.data.items
      })
      .catch(e => {
        this.errors.push(e)
      })
    }
      })
      .catch(e => {
        this.errors.push(e)
      }),
      ,
    }

也尝试过:

<a name="tags" id='tags'></a> 

<a href="edit.php?id=382#tags">GO</a>

简而言之-不起作用。页面被加载在顶部或如果被重新加载-在当前滚动位置。

有时候有时会在<a href="edit.php?id=382&#tags">GO</a> 锚点附近出现滚动。

有帮助吗?

1 个答案:

答案 0 :(得分:1)

我认为您的代码很好。但是页面中必须有足够的可滚动高度。
下面的示例有效。

<a href="index.html?id=382&#link1">GO To Link 1</a> <!-- redirect to link 1 -->

<a href="index.html?id=382#link2">GO To Link 2</a> <!-- redirect to link 2 -->

<div style="height:100%;"></div>

<a name="tags" id='link1'>Link 1</a> <!-- link 1 -->

<div style="height:100%;"></div>

<a name="tags" id='link2'>Link 2</a> <!-- link 2 -->

<div style="height:100%;"></div>